@dialpad/dialtone/dist/vue3/lib/tab/tab.js

Dialpad's Dialtone design system monorepo

import { TAB_IMPORTANCE_MODIFIERS as r } from "./tabs-constants.js";
import { resolveComponent as d, createBlock as i, openBlock as n, mergeProps as o, toHandlers as c, withCtx as u, renderSlot as b } from "vue";
import { _ as f } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import m from "../button/button.js";
const p = {
  compatConfig: { MODE: 3 },
  name: "DtTab",
  components: {
    DtButton: m
  },
  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: ""
    }
  },
  emits: [
    /**
     * Native button focus in event
     *
     * @event focus
     * @type {FocusEvent}
     */
    "focus",
    /**
     * Native button click event
     *
     * @event click
     * @type {PointerEvent | KeyboardEvent}
     */
    "click"
  ],
  data() {
    return {
      TAB_IMPORTANCE_MODIFIERS: r
    };
  },
  computed: {
    tabListeners() {
      return {
        click: (e) => {
          this.$emit("click", e);
        },
        focus: (e) => {
          this.setFocus(this.id), this.$emit("focus", e);
        }
      };
    },
    isSelected() {
      return this.groupContext.selected === this.panelId;
    }
  },
  mounted() {
    this.selected && (this.groupContext.selected = this.panelId);
  }
};
function _(e, h, t, C, s, a) {
  const l = d("dt-button");
  return n(), i(l, o({
    id: `dt-tab-${t.id}`,
    class: [
      "d-tab",
      {
        [s.TAB_IMPORTANCE_MODIFIERS.selected]: a.isSelected
      },
      t.tabClass
    ],
    role: "tab",
    "aria-selected": `${a.isSelected}`,
    "aria-controls": `dt-panel-${t.panelId}`,
    "aria-label": t.label,
    "data-qa": "dt-tab",
    tabindex: a.isSelected ? "0" : "-1",
    disabled: a.groupContext.disabled || t.disabled
  }, e.$attrs, c(a.tabListeners)), {
    default: u(() => [
      b(e.$slots, "default")
    ]),
    _: 3
  }, 16, ["id", "class", "aria-selected", "aria-controls", "aria-label", "tabindex", "disabled"]);
}
const y = /* @__PURE__ */ f(p, [["render", _]]);
export {
  y as default
};
//# sourceMappingURL=tab.js.map