@nextcloud/vue/dist/chunks/NcAppNavigation-BleAA1U_.cjs

Nextcloud vue components

require('../assets/NcAppNavigation-fhylfTxx.css');
"use strict";
const Composables_useIsMobile = require("../Composables/useIsMobile.cjs");
const focusTrap$1 = require("./focusTrap-EeXFmjdI.cjs");
const eventBus = require("@nextcloud/event-bus");
const focusTrap = require("focus-trap");
const Components_NcAppNavigationList = require("../Components/NcAppNavigationList.cjs");
const NcAppNavigationToggle = require("./NcAppNavigationToggle-DAhbqsn_.cjs");
const Vue = require("vue");
const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
const Vue__default = /* @__PURE__ */ _interopDefault(Vue);
const _sfc_main = {
  name: "NcAppNavigation",
  components: {
    NcAppNavigationList: Components_NcAppNavigationList,
    NcAppNavigationToggle: NcAppNavigationToggle.NcAppNavigationToggle
  },
  // Injected from NcContent
  inject: {
    setHasAppNavigation: {
      default: () => () => Vue__default.default.util.warn("NcAppNavigation is not mounted inside NcContent, this is probably an error."),
      from: "NcContent:setHasAppNavigation"
    }
  },
  props: {
    /**
     * The aria label to describe the navigation
     */
    ariaLabel: {
      type: String,
      default: ""
    },
    /**
     * aria-labelledby attribute to describe the navigation
     */
    ariaLabelledby: {
      type: String,
      default: ""
    }
  },
  setup() {
    return {
      isMobile: Composables_useIsMobile.useIsMobile()
    };
  },
  data() {
    return {
      open: !this.isMobile,
      focusTrap: null
    };
  },
  watch: {
    isMobile() {
      this.open = !this.isMobile;
      this.toggleFocusTrap();
    },
    open() {
      this.toggleFocusTrap();
    }
  },
  mounted() {
    this.setHasAppNavigation(true);
    eventBus.subscribe("toggle-navigation", this.toggleNavigationByEventBus);
    eventBus.emit("navigation-toggled", {
      open: this.open
    });
    this.focusTrap = focusTrap.createFocusTrap(this.$refs.appNavigationContainer, {
      allowOutsideClick: true,
      fallbackFocus: this.$refs.appNavigationContainer,
      trapStack: focusTrap$1.getTrapStack(),
      escapeDeactivates: false
    });
    this.toggleFocusTrap();
  },
  unmounted() {
    this.setHasAppNavigation(false);
    eventBus.unsubscribe("toggle-navigation", this.toggleNavigationByEventBus);
    this.focusTrap.deactivate();
  },
  methods: {
    /**
     * Toggle the navigation
     *
     * @param {boolean} [state] set the state instead of inverting the current one
     */
    toggleNavigation(state) {
      if (this.open === state) {
        eventBus.emit("navigation-toggled", {
          open: this.open
        });
        return;
      }
      this.open = typeof state === "undefined" ? !this.open : state;
      const bodyStyles = getComputedStyle(document.body);
      const animationLength = parseInt(bodyStyles.getPropertyValue("--animation-quick")) || 100;
      setTimeout(() => {
        eventBus.emit("navigation-toggled", {
          open: this.open
        });
      }, 1.5 * animationLength);
    },
    toggleNavigationByEventBus({ open }) {
      this.toggleNavigation(open);
    },
    /**
     * Activate focus trap if it is currently needed, otherwise deactivate
     */
    toggleFocusTrap() {
      if (this.isMobile && this.open) {
        this.focusTrap.activate();
      } else {
        this.focusTrap.deactivate();
      }
    },
    handleEsc() {
      if (this.isMobile) {
        this.toggleNavigation(false);
      }
    }
  }
};
var _sfc_render = function render() {
  var _vm = this, _c = _vm._self._c;
  return _c("div", { ref: "appNavigationContainer", staticClass: "app-navigation", class: { "app-navigation--close": !_vm.open } }, [_c("nav", { staticClass: "app-navigation__content", attrs: { "id": "app-navigation-vue", "aria-hidden": _vm.open ? "false" : "true", "aria-label": _vm.ariaLabel || void 0, "aria-labelledby": _vm.ariaLabelledby || void 0, "inert": !_vm.open || void 0 }, on: { "keydown": function($event) {
    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"])) return null;
    return _vm.handleEsc.apply(null, arguments);
  } } }, [_c("div", { staticClass: "app-navigation__search" }, [_vm._t("search")], 2), _c("div", { staticClass: "app-navigation__body", class: { "app-navigation__body--no-list": !_vm.$scopedSlots.list } }, [_vm._t("default")], 2), _vm.$scopedSlots.list ? _c("NcAppNavigationList", { staticClass: "app-navigation__list" }, [_vm._t("list")], 2) : _vm._e(), _vm._t("footer")], 2), _c("NcAppNavigationToggle", { attrs: { "open": _vm.open }, on: { "update:open": _vm.toggleNavigation } })], 1);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
  _sfc_main,
  _sfc_render,
  _sfc_staticRenderFns,
  false,
  null,
  "e7d078cc"
);
const NcAppNavigation = __component__.exports;
exports.NcAppNavigation = NcAppNavigation;