keep-vue/lib/components/Tabs/TabItem.vue.js

Keep Vue is an open-source component library built on top of Vue3 and Tailwind CSS. It offers a collection of pre-designed UI components and styles that you can easily integrate into your web applications.

/// <reference types=".vue-global-types/vue_3.5_false.d.ts" />
import { computed } from "vue";
import { cn } from "../../utils/cn";
import { useTabs } from "./useTabs";
const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
let __VLS_typeProps;
const props = defineProps();
const restProps = computed(() => {
    const { class: _, value, bgClass, contentClass, ...rest } = props;
    return rest;
});
const { activeItem, handleActive, variant } = useTabs();
const __VLS_fnComponent = (await import('vue')).defineComponent({});
;
let __VLS_functionalComponentProps;
function __VLS_template() {
    const __VLS_ctx = {};
    const __VLS_localComponents = {
        ...{},
        ...{},
        ...__VLS_ctx,
    };
    let __VLS_components;
    const __VLS_localDirectives = {
        ...{},
        ...__VLS_ctx,
    };
    let __VLS_directives;
    let __VLS_styleScopedClasses;
    let __VLS_resolvedLocalAndGlobalComponents;
    __VLS_elementAsFunction(__VLS_intrinsicElements.button, __VLS_intrinsicElements.button)({ ...{ onClick: (() => __VLS_ctx.handleActive(props.value)) }, key: ("tab-item"), "data-active": ((__VLS_ctx.activeItem === __VLS_ctx.value)), ...(__VLS_ctx.restProps), ...{ class: ((__VLS_ctx.cn('relative h-10 px-5 text-body-4 font-medium', __VLS_ctx.variant === 'underline' &&
                'data-[active=true]:text-primary-500 dark:data-[active=false]:text-white dark:data-[active=true]:text-primary-500', __VLS_ctx.variant === 'fill' &&
                'data-[active=false]:text-metal-900 data-[active=true]:text-metal-900 dark:data-[active=false]:text-white dark:data-[active=true]:text-metal-900', __VLS_ctx.variant === 'default' &&
                'data-[active=false]:text-metal-900 data-[active=true]:text-metal-900 dark:data-[active=false]:text-white dark:data-[active=true]:text-white', props.class))) }, });
    if (__VLS_ctx.activeItem === props.value) {
        __VLS_elementAsFunction(__VLS_intrinsicElements.span)({ ...{ class: ((__VLS_ctx.cn('absolute inset-0', __VLS_ctx.variant === 'fill' &&
                    'rounded-lg border border-metal-100 bg-white shadow-medium', __VLS_ctx.variant === 'default' &&
                    'rounded-lg border border-metal-100 bg-transparent', __VLS_ctx.variant === 'underline' &&
                    '-mb-[1px] rounded-none border-b-2 border-b-primary-500', props.bgClass))) }, });
    }
    __VLS_elementAsFunction(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)({ ...{ class: ((__VLS_ctx.cn('relative z-10 flex items-center justify-center gap-1 transition-all duration-500', props.contentClass))) }, });
    var __VLS_0 = {};
    var __VLS_slots;
    var __VLS_inheritedAttrs;
    const __VLS_refs = {};
    var $refs;
    return {
        slots: __VLS_slots,
        refs: $refs,
        attrs: {},
    };
}
;
const __VLS_self = (await import('vue')).defineComponent({
    setup() {
        return {
            cn: cn,
            restProps: restProps,
            activeItem: activeItem,
            handleActive: handleActive,
            variant: variant,
        };
    },
    __typeProps: {},
});
const __VLS_component = (await import('vue')).defineComponent({
    setup() {
        return {};
    },
    __typeProps: {},
});
export default {};
;