@varlet/ui/es/tab/Tab.mjs

A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.

import { computed, defineComponent, ref, watch } from "vue";
import { call } from "@varlet/shared";
import Ripple from "../ripple/index.mjs";
import { createNamespace } from "../utils/components.mjs";
import { props } from "./props.mjs";
import { useTabs } from "./provide.mjs";
const { name, n, classes } = createNamespace("tab");
import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
function __render__(_ctx, _cache) {
  const _directive_ripple = _resolveDirective("ripple");
  return _withDirectives((_openBlock(), _createElementBlock(
    "div",
    {
      ref: "tabEl",
      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), _ctx.computeColorClass(), _ctx.n(`--${_ctx.itemDirection}`))),
      style: _normalizeStyle({
        color: _ctx.computeColorStyle()
      }),
      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
    },
    [
      _renderSlot(_ctx.$slots, "default")
    ],
    6
    /* CLASS, STYLE */
  )), [
    [_directive_ripple, { disabled: _ctx.disabled || !_ctx.ripple }]
  ]);
}
const __sfc__ = defineComponent({
  name,
  directives: { Ripple },
  props,
  setup(props2) {
    const tabEl = ref(null);
    const element = computed(() => tabEl.value);
    const name2 = computed(() => props2.name);
    const disabled = computed(() => props2.disabled);
    const { index, tabs, bindTabs } = useTabs();
    const { onTabClick, active, activeColor, inactiveColor, disabledColor, itemDirection, resize } = tabs;
    const tabProvider = {
      name: name2,
      index,
      disabled,
      element
    };
    bindTabs(tabProvider);
    watch(() => [props2.name, props2.disabled], resize);
    function shouldActive() {
      if (props2.name != null) {
        return active.value === props2.name;
      }
      return active.value === (index == null ? void 0 : index.value);
    }
    function computeColorStyle() {
      return props2.disabled ? disabledColor.value : shouldActive() ? activeColor.value : inactiveColor.value;
    }
    function computeColorClass() {
      return props2.disabled ? n("$-tab--disabled") : shouldActive() ? n("$-tab--active") : n("$-tab--inactive");
    }
    function handleClick(event) {
      const { disabled: disabled2, name: name3, onClick } = props2;
      if (disabled2) {
        return;
      }
      call(onClick, name3 != null ? name3 : index.value, event);
      onTabClick(tabProvider);
    }
    return {
      tabEl,
      active,
      activeColor,
      inactiveColor,
      itemDirection,
      n,
      classes,
      computeColorStyle,
      computeColorClass,
      handleClick
    };
  }
});
__sfc__.render = __render__;
var stdin_default = __sfc__;
export {
  stdin_default as default
};