@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 g, createVNode as m } from "vue";
import { DrawerNavigation as v } from "./DrawerNavigation.mjs";
import { getDefaultSlots as y, templateRendering as l, getListeners as c, getDir as k, validatePackage as x, shouldShowValidationUI as S, getLicenseMessage as b } from "@progress/kendo-vue-common";
import { packageMetadata as h } from "../package-metadata.mjs";
const N = /* @__PURE__ */ g({
  name: "KendoDrawer",
  emits: {
    select: (e) => !0,
    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() {
    x(h), this.showLicenseWatermark = S(h), this.licenseMessage = b(h);
  },
  data() {
    const {
      expanded: e,
      mode: t,
      position: i,
      animation: d,
      mini: o,
      width: r,
      miniWidth: n,
      items: a,
      item: s
    } = this.$props;
    return {
      currentDir: "ltr",
      drawer: {
        expanded: e,
        mode: t,
        dir: this.currentDir,
        position: i,
        animation: d,
        mini: o,
        width: r,
        miniWidth: n,
        items: a,
        item: s
      },
      showLicenseWatermark: !1,
      licenseMessage: void 0
    };
  },
  mounted() {
    this.currentDir = k(this.$el, this.$props.dir);
  },
  updated() {
    const {
      expanded: e,
      mode: t,
      position: i,
      animation: d,
      mini: o,
      width: r,
      miniWidth: n,
      items: a,
      item: s
    } = 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 = o, this.drawer.width = r, this.drawer.miniWidth = n, this.drawer.items = a, this.drawer.item = s;
  },
  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 = y(this), {
      items: t,
      tabIndex: i,
      mode: d,
      expanded: o,
      item: r,
      navigationHeader: n,
      navigationFooter: a,
      navigationContent: s
    } = this.$props, u = r ? l.call(this, r, c.call(this)) : void 0, p = n ? l.call(this, n, c.call(this)) : void 0, w = a ? l.call(this, a, c.call(this)) : void 0, f = s ? l.call(this, s, c.call(this)) : void 0;
    return m("div", {
      class: this.drawerClassNames,
      dir: this.currentDir,
      tabindex: i
    }, [d === "overlay" && o && m("div", {
      class: "k-overlay",
      onClick: this.onOverlayClick
    }, null), t && m(v, {
      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 {
  N as Drawer
};