@progress/kendo-vue-layout/drawer/DrawerNavigation.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 R, createVNode as s, h as o } from "vue";
import { DrawerItem as _ } from "./DrawerItem.mjs";
import { getDefaultSlots as j, WatermarkOverlay as E, templateRendering as F, getListeners as X, getTemplate as l } from "@progress/kendo-vue-common";
const P = 240, B = 50, H = {
  duration: 200
}, U = {
  duration: 0
}, J = /* @__PURE__ */ R({
  name: "KendoDrawerNavigation",
  props: {
    item: [Object],
    header: [Object],
    footer: [Object],
    content: [Object],
    tabIndex: Number,
    showLicenseWatermark: Boolean,
    licenseMessage: String,
    onSelect: Function
  },
  inject: {
    kendoDrawer: {
      default: null
    }
  },
  computed: {
    navigationClassNames() {
      const {
        position: e
      } = this.kendoDrawer;
      return {
        "k-widget k-drawer": !0,
        "k-drawer-start": e === "start",
        "k-drawer-end": e === "end"
      };
    }
  },
  render() {
    const e = j(this), {
      animation: n,
      expanded: c,
      mode: d,
      position: p,
      mini: r,
      dir: h,
      width: u,
      miniWidth: w,
      items: f
    } = this.kendoDrawer, I = this.$props.header, y = this.$props.footer, g = this.$props.content, t = typeof n != "boolean" ? n : n === !1 ? U : H, k = u || P, D = w || B, N = {
      opacity: 1,
      flexBasis: k + "px",
      WebkitTransition: "all " + (t && t.duration) + "ms",
      /* Safari */
      transition: "all " + (t && t.duration) + "ms"
    }, b = {
      opacity: 1,
      transform: "translateX(0px)",
      WebkitTransition: "all " + (t && t.duration) + "ms",
      /* Safari */
      transition: "all " + (t && t.duration) + "ms"
    }, x = {
      opacity: r ? 1 : 0,
      flexBasis: r ? D + "px" : 0,
      WebkitTransition: "all " + (t && t.duration) + "ms",
      /* Safari */
      transition: "all " + (t && t.duration) + "ms"
    }, T = {
      opacity: 0,
      transform: "translateX(-100%)",
      WebkitTransition: "all " + (t && t.duration) + "ms",
      /* Safari */
      transition: "all " + (t && t.duration) + "ms"
    }, W = {
      opacity: 0,
      transform: "translateX(100%)",
      WebkitTransition: "all " + (t && t.duration) + "ms",
      /* Safari */
      transition: "all " + (t && t.duration) + "ms"
    }, v = {
      transform: "translateX(0%)",
      WebkitTransitionDuration: (t && t.duration) + "ms",
      /* Safari */
      transitionDuration: (t && t.duration) + "ms"
    }, O = this.showLicenseWatermark ? s(E, {
      message: this.licenseMessage
    }, null) : null, A = c ? d === "push" ? N : b : d === "push" ? x : h === "ltr" && p === "start" || h === "rtl" && p === "end" ? r ? v : T : r ? v : W, S = f && s("ul", {
      class: "k-drawer-items",
      role: "menubar",
      "aria-orientation": "vertical",
      "aria-expanded": c
    }, [f.map(function(a, m) {
      let i = this.$props.item;
      i && !i.type && !i.render && (i = F.call(this, this.$props.item, X.call(this)));
      const C = s(_, {
        key: m,
        index: m,
        onClick: this.onDrawerItemSelect,
        text: a.text,
        icon: a.icon,
        svgIcon: a.svgIcon,
        separator: a.separator,
        selected: a.selected,
        targetItem: a.targetItem
      }, null);
      return l.call(this, {
        h: o,
        template: i,
        defaultRendering: C,
        additionalProps: {
          ...a,
          index: m
        },
        additionalListeners: {
          click: this.onDrawerItemSelect
        }
      });
    }, this), O]), $ = l.call(this, {
      h: o,
      template: I
    }), L = l.call(this, {
      h: o,
      template: y
    }), M = l.call(this, {
      h: o,
      template: g
    });
    return s("div", {
      style: A,
      class: this.navigationClassNames
    }, [s("div", {
      class: "k-drawer-wrapper",
      style: !c && r && d === "overlay" ? {
        width: D + "px"
      } : {
        width: k + "px"
      }
    }, [$, g ? M : S || e, L])]);
  },
  methods: {
    focus(e) {
      this.$el && this.$el.focus(e);
    },
    onDrawerItemSelect(e, n) {
      this.$emit("select", e, n);
    }
  }
});
export {
  J as DrawerNavigation
};