<script>
import theme from "#build/b24ui/table-wrapper";
</script>

<script setup>
import { computed } from "vue";
import { Primitive } from "reka-ui";
import { useAppConfig } from "#imports";
import { tv } from "../utils/tv";
defineOptions({ inheritAttrs: false });
const props = defineProps({
  as: { type: null, required: false, default: "div" },
  size: { type: null, required: false },
  rounded: { type: Boolean, required: false },
  zebra: { type: Boolean, required: false },
  pinRows: { type: Boolean, required: false },
  pinCols: { type: Boolean, required: false },
  rowHover: { type: Boolean, required: false },
  bordered: { type: Boolean, required: false },
  scrollbarThin: { type: Boolean, required: false, default: true },
  class: { type: null, required: false },
  b24ui: { type: null, required: false }
});
const appConfig = useAppConfig();
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.tableWrapper || {} })({
  size: props.size,
  rounded: Boolean(props.rounded),
  zebra: Boolean(props.zebra),
  pinRows: Boolean(props.pinRows),
  pinCols: Boolean(props.pinCols),
  rowHover: Boolean(props.rowHover),
  bordered: Boolean(props.bordered),
  scrollbarThin: Boolean(props.scrollbarThin)
}));
</script>

<template>
  <Primitive
    :as="as"
    data-slot="base"
    :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
  >
    <slot />
  </Primitive>
</template>
