@progress/kendo-vue-layout/drawer/Drawer.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 v, createVNode as c } from "vue";
import { DrawerNavigation as g } from "./DrawerNavigation.mjs";
import { validatePackage as y, shouldShowValidationUI as k, getDir as x, getDefaultSlots as S, templateRendering as l, getListeners as m } from "@progress/kendo-vue-common";
import { packageMetadata as h } from "../package-metadata.mjs";
const C = /* @__PURE__ */ v({
  name: "KendoDrawer",
  emits: {
    select: null,
    overlayclick: null
  },
  props: {
    animation: {
      type: [Object, Boolean],
      default: !0
    },
    expanded: {
      type: Boolean,
      default: !1
    },
    dir: {
      type: String,
      default: "ltr"
    },
    item: [String, Object, Function],
    navigationHeader: [String, Object, Function],
    navigationFooter: [String, Object, Function],
    navigationContent: [String, Object, Function],
    mode: {
      type: String,
      default: "overlay",
      validator: function(e) {
        return ["overlay", "push"].includes(e);
      }
    },
    position: {
      type: String,
      default: "start",
      validator: function(e) {
        return ["start", "end"].includes(e);
      }
    },
    items: {
      type: Array,
      default: []
    },
    mini: {
      type: Boolean,
      default: !1
    },
    tabIndex: Number,
    width: {
      type: Number,
      default: 240
    },
    miniWidth: {
      type: Number,
      default: 50
    }
  },
  created() {
    y(h), this.showLicenseWatermark = k(h);
  },
  data() {
    const {
      expanded: e,
      mode: t,
      position: i,
      animation: d,
      mini: s,
      width: r,
      miniWidth: n,
      items: a,
      item: o
    } = this.$props;
    return {
      currentDir: "ltr",
      drawer: {
        expanded: e,
        mode: t,
        dir: this.currentDir,
        position: i,
        animation: d,
        mini: s,
        width: r,
        miniWidth: n,
        items: a,
        item: o
      },
      showLicenseWatermark: !1
    };
  },
  mounted() {
    this.currentDir = x(this.$el, this.$props.dir);
  },
  updated() {
    const {
      expanded: e,
      mode: t,
      position: i,
      animation: d,
      mini: s,
      width: r,
      miniWidth: n,
      items: a,
      item: o
    } = this.$props;
    this.drawer.expanded = e, this.drawer.mode = t, this.drawer.dir = this.currentDir, this.drawer.position = i, this.drawer.animation = d, this.drawer.mini = s, this.drawer.width = r, this.drawer.miniWidth = n, this.drawer.items = a, this.drawer.item = o;
  },
  provide() {
    return {
      kendoDrawer: this.drawer
    };
  },
  computed: {
    drawerClassNames() {
      const {
        expanded: e,
        mode: t,
        mini: i
      } = this.$props;
      return {
        "k-drawer-container": !0,
        "k-drawer-expanded": e,
        "k-drawer-overlay": t === "overlay",
        "k-drawer-push": t === "push",
        "k-drawer-mini": i
      };
    }
  },
  render() {
    const e = S(this), {
      items: t,
      tabIndex: i,
      mode: d,
      expanded: s,
      item: r,
      navigationHeader: n,
      navigationFooter: a,
      navigationContent: o
    } = this.$props, u = r ? l.call(this, r, m.call(this)) : void 0, p = n ? l.call(this, n, m.call(this)) : void 0, w = a ? l.call(this, a, m.call(this)) : void 0, f = o ? l.call(this, o, m.call(this)) : void 0;
    return c("div", {
      class: this.drawerClassNames,
      dir: this.currentDir,
      tabindex: i
    }, [d === "overlay" && s && c("div", {
      class: "k-overlay",
      onClick: this.onOverlayClick
    }, null), t && c(g, {
      onSelect: this.handleSelect,
      item: u,
      header: p,
      footer: w,
      content: f,
      showLicenseWatermark: this.showLicenseWatermark
    }, null), e]);
  },
  methods: {
    focus() {
      this.$el && this.$el.focus();
    },
    handleSelect(e, t) {
      this.$props.items && this.$emit("select", {
        itemTarget: e,
        itemIndex: t,
        component: this
      });
    },
    onOverlayClick(e) {
      this.$emit("overlayclick", e);
    }
  }
});
export {
  C as Drawer
};