@progress/kendo-vue-layout/bottomnavigation/BottomNavigation.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 d, createVNode as n } from "vue";
import { packageMetadata as c } from "../package-metadata.mjs";
import { Keys as l, focusFirstFocusableChild as u, templateRendering as m, getListeners as f, validatePackage as h, guid as p } from "@progress/kendo-vue-common";
import { ITEM_FLOW_CLASSES as v, THEME_COLOR_CLASSES as S, POSITION_MODE_CLASSES as y } from "./models/utils.mjs";
import { BottomNavigationItem as g } from "./BottomNavigationItem.mjs";
const w = /* @__PURE__ */ d({
  name: "KendoBottomNavigation",
  emits: {
    keydown: null,
    select: null
  },
  props: {
    dir: String,
    themeColor: {
      type: String,
      default: "primary",
      validator: function(t) {
        return ["primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse"].includes(t);
      }
    },
    fill: {
      type: String,
      default: "flat",
      validator: function(t) {
        return ["solid", "flat"].includes(t);
      }
    },
    fillMode: {
      type: String,
      default: "flat",
      validator: function(t) {
        return ["solid", "flat"].includes(t);
      }
    },
    item: [String, Object, Function],
    items: Array,
    itemFlow: {
      type: String,
      default: "vertical",
      validator: function(t) {
        return ["vertical", "horizontal"].includes(t);
      }
    },
    positionMode: {
      type: String,
      default: "fixed",
      validator: function(t) {
        return ["sticky", "fixed"].includes(t);
      }
    },
    border: {
      type: Boolean,
      default: !0
    },
    disabled: Boolean,
    selected: Number
  },
  created() {
    h(c), this.navId = p();
  },
  computed: {
    navClasses() {
      const {
        themeColor: t,
        fillMode: e,
        positionMode: a,
        itemFlow: r,
        border: i,
        disabled: o
      } = this.$props, s = e !== void 0 ? e : this.$props.fill;
      return {
        "k-bottom-nav": !0,
        [y[a]]: !0,
        [S[t]]: !0,
        [`k-bottom-nav-${s}`]: s,
        [`k-bottom-nav-${s}-${t}`]: !!(s && t),
        [v[r]]: !0,
        "k-bottom-nav-border": i,
        "k-disabled": o
      };
    }
  },
  render() {
    const {
      id: t,
      items: e,
      item: a,
      disabled: r
    } = this.$props;
    return n("nav", {
      class: this.navClasses,
      id: t || this.navId
    }, [e && e.map(function(i, o) {
      const s = m.call(this, i.item || a, f.call(this));
      return n(g, {
        key: o,
        index: o,
        style: i.style,
        class: i.class,
        id: `${t || this.navId}-${o}`,
        disabled: r || i.disabled,
        selected: this.selected === o || i.selected,
        dataItem: i,
        item: s,
        onSelect: this.handleSelect,
        onKeydown: this.handleKeyDown
      }, null);
    }, this)]);
  },
  methods: {
    focus() {
      this.$el && u(this.$el);
    },
    dispatchSelectEvent(t, e) {
      this.items && (this.items[e].disabled || this.$emit("select", {
        event: t,
        itemTarget: this.items[e],
        itemIndex: e
      }));
    },
    handleSelect(t, e) {
      this.dispatchSelectEvent(t, e);
    },
    handleKeyDown(t, e) {
      switch (t.keyCode) {
        case l.enter:
        case l.space:
          this.dispatchSelectEvent(t, e), t.preventDefault();
          break;
      }
      this.$emit("keydown", {
        event: t,
        itemTarget: this.items[e],
        itemIndex: e
      });
    }
  }
});
export {
  w as BottomNavigation
};