@dialpad/dialtone-vue/dist/lib/tab/tab.js

Vue component library for Dialpad's design system Dialtone

import { TAB_IMPORTANCE_MODIFIERS as a } from "./tabs-constants.js";
import { n as r } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import i from "../button/button.js";
const d = {
  name: "DtTab",
  components: {
    DtButton: i
  },
  inject: ["groupContext", "setFocus"],
  inheritAttrs: !1,
  props: {
    /**
     * Id of the tab
     */
    id: {
      type: String,
      required: !0
    },
    /**
     * Id of the associated content panel
     */
    panelId: {
      type: String,
      required: !0
    },
    /**
     * Describes the tab
     */
    label: {
      type: String,
      default: ""
    },
    /**
     * Controls the state of the tab
     * @values true, false
     */
    selected: {
      type: Boolean,
      default: !1
    },
    /**
     * If true, disables the tab
     * @values true, false
     */
    disabled: {
      type: Boolean,
      default: !1
    },
    /**
     * Used to customize the tab element
     */
    tabClass: {
      type: [String, Array, Object],
      default: ""
    }
  },
  data() {
    return {
      TAB_IMPORTANCE_MODIFIERS: a
    };
  },
  computed: {
    isSelected() {
      return this.groupContext.selected === this.panelId;
    },
    tabListeners() {
      return {
        ...this.$listeners,
        click: (e) => {
          this.$emit("click", e);
        },
        focus: (e) => {
          this.setFocus(this.id), this.$emit("focus", e);
        }
      };
    }
  },
  mounted() {
    this.selected && (this.groupContext.selected = this.panelId);
  }
};
var n = function() {
  var t = this, s = t._self._c;
  return s("dt-button", t._g(t._b({ class: [
    "d-tab",
    {
      [t.TAB_IMPORTANCE_MODIFIERS.selected]: t.isSelected
    },
    t.tabClass
  ], attrs: { id: `dt-tab-${t.id}`, role: "tab", "aria-selected": `${t.isSelected}`, "aria-controls": `dt-panel-${t.panelId}`, "aria-label": t.label, "data-qa": "dt-tab", tabindex: t.isSelected ? "0" : "-1", disabled: t.groupContext.disabled || t.disabled } }, "dt-button", t.$attrs, !1), t.tabListeners), [t._t("default")], 2);
}, l = [], o = /* @__PURE__ */ r(
  d,
  n,
  l
);
const b = o.exports;
export {
  b as default
};
//# sourceMappingURL=tab.js.map