@nextcloud/vue/dist/chunks/NcAppSidebarTab.mjs

Nextcloud vue components

import '../assets/NcAppSidebarTab.css';
import { openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, renderSlot } from "vue";
import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
const _sfc_main = {
  name: "NcAppSidebarTab",
  inject: ["registerTab", "unregisterTab", "getActiveTab", "isTablistShown"],
  props: {
    /**
     * Unique id of the sidebar tab
     */
    id: {
      type: String,
      required: true
    },
    /**
     * Tab name in navigation
     */
    name: {
      type: String,
      required: true
    },
    /**
     * Tab icon's html class in navigation. Used if #icon slot is not provided.
     *
     * The #icon slot receives the tab's active state as `{ selected }`, so a
     * filled icon variant can be rendered for the active tab.
     */
    icon: {
      type: String,
      default: ""
    },
    /**
     * Tab order in navigation. If not provided, name is used.
     */
    order: {
      type: Number,
      default: 0
    }
  },
  emits: [
    "bottomReached",
    "scroll"
  ],
  expose: ["id", "name", "icon", "order", "renderIcon"],
  computed: {
    /**
     * Is the current tab an active tab, that should be shown?
     *
     * @return {boolean}
     */
    isActive() {
      return this.getActiveTab() === this.id;
    }
  },
  created() {
    this.registerTab(this);
  },
  beforeUnmount() {
    this.unregisterTab(this.id);
  },
  methods: {
    onScroll(event) {
      if (this.$el.scrollHeight - this.$el.scrollTop === this.$el.clientHeight) {
        this.$emit("bottomReached", event);
      }
      this.$emit("scroll", event);
    },
    /**
     * Render tab's icon slot if any.
     * The active state is passed to the slot so consumers can render a
     * filled icon variant for the active tab, e.g.
     * `<template #icon="{ selected }">`.
     *
     * @param {boolean} selected whether the tab is currently active
     * @return {import('vue').VNode[]}
     */
    renderIcon(selected = false) {
      return this.$slots.icon?.({ selected });
    }
  }
};
const _hoisted_1 = ["id", "aria-hidden", "aria-label", "aria-labelledby", "role", "tabindex"];
const _hoisted_2 = { class: "hidden-visually" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("section", {
    id: `tab-${$props.id}`,
    "aria-hidden": !$options.isActive,
    "aria-label": $options.isTablistShown() ? void 0 : $props.name,
    "aria-labelledby": $options.isTablistShown() ? `tab-button-${$props.id}` : void 0,
    class: normalizeClass(["app-sidebar__tab", { "app-sidebar__tab--active": $options.isActive }]),
    role: $options.isTablistShown() ? "tabpanel" : void 0,
    tabindex: $options.isTablistShown() ? 0 : -1,
    onScroll: _cache[0] || (_cache[0] = (...args) => $options.onScroll && $options.onScroll(...args))
  }, [
    createElementVNode("h3", _hoisted_2, toDisplayString($props.name), 1),
    renderSlot(_ctx.$slots, "default", {}, void 0, true)
  ], 42, _hoisted_1);
}
const NcAppSidebarTab = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-e4df51a0"]]);
export {
  NcAppSidebarTab as N
};
//# sourceMappingURL=NcAppSidebarTab.mjs.map