<script setup>
import { QTabs, QTabPanels } from "quasar";
import { getCurrentInstance, computed } from "vue";
import { useLightLabel } from "../../composables/useLightProps";
defineOptions({ inheritAttrs: false });
const props = defineProps({
  name: { type: [Number, String], required: false },
  disable: { type: Boolean, required: false },
  icon: { type: null, required: false },
  label: { type: null, required: false },
  alert: { type: [Boolean, String], required: false, skipCheck: true },
  alertIcon: { type: null, required: false },
  noCaps: { type: Boolean, required: false, skipCheck: true },
  contentClass: { type: null, required: false },
  ripple: { type: Boolean, required: false, skipCheck: true },
  tabindex: { type: null, required: false }
});
const parentType = getCurrentInstance()?.parent?.type;
const isTab = parentType === QTabs;
const isPanel = parentType === QTabPanels;
const translatedLabel = useLightLabel(props);
const tabProps = computed(() => {
  const { scrollTarget, ...rest } = props;
  return { ...rest, label: translatedLabel.value };
});
const panelProps = computed(() => ({
  name: props.name,
  disable: props.disable,
  scrollTarget: props.scrollTarget
}));
</script>

<template>
    <q-tab-panel v-if="isPanel" v-bind="panelProps">
        <slot></slot>
    </q-tab-panel>
    <q-tab v-else-if="isTab" v-bind="tabProps" />
</template>
