[Button] passthrough scoped props not working

[greenspace10]

Not sure if I am doing this correctly,
what I am doing is building a few components using primevue as the base.

I have PrimeVue install and unstyled.

Button.vue

<script setup>
import Button from 'primevue/button';
import { computed, useAttrs } from 'vue';
import { buttonVariant, sizes, iconSizes } from './style/buttonStyle.js';
import SpinnerIcon from '@/Components/Icons/SpinnerIcon.vue';

defineOptions({
  name: 'Button',
  inheritAttrs: false,
});

const props = defineProps({
  fluid: {
    type: Boolean,
    default: false,
  },
  outline: {
    type: Boolean,
    default: false,
  },
  flat: {
    type: Boolean,
    default: false,
  },
  rounded: {
    type: Boolean,
    default: false,
  },
  iconPos: {
    type: String,
    default: 'left',
  },
  variant: {
    type: String,
    default: Object.keys(buttonVariant)[1],
    validator: function (value) {
      return Object.keys(buttonVariant).indexOf(value) !== -1;
    },
  },
  size: {
    type: String,
    default: Object.keys(sizes)[0],
    validator: function (value) {
      return Object.keys(sizes).indexOf(value) !== -1;
    },
  },
});

const attrs = useAttrs();

const variantClasses = computed(() => {
  if (props.outline) {
    return buttonVariant[props.variant]['outline'];
  }
  if (props.flat) {
    return buttonVariant[props.variant]['flat'];
  }
  return buttonVariant[props.variant]['default'];
});

const preset = computed(() => {
  return {
    root: {
      class: [
        'outline-none whitespace-nowrap inline-flex justify-center items-center font-medium',
        'group transition-all ease-in duration-150 focus:ring-2 focus:ring-offset-2',
        'hover:shadow-sm disabled:opacity-50 disabled:cursor-not-allowed',
        { 'w-full': props.fluid },
        sizes[props.size],
        variantClasses.value,
      ],
    },
    icon: {
      class: [
        'w-3.5 h-3.5',
        {
          'order-1': props.iconPos === 'right',
        },
      ],
    },

    pcBadge: { class: 'bg-red-500' },
  };
});

const computedAttrs = computed(() => {
  return Object.keys(attrs)
    .filter(key => !Object.keys(props).includes(key))
    .reduce((obj, key) => {
      obj[key] = attrs[key];
      return obj;
    }, {});
});
</script>

<template>
  <Button
    v-bind="computedAttrs"
    :pt="preset"
  >
    <template #loadingicon="slotProps">
      <SpinnerIcon :class="slotProps.class" />
    </template>

    <template #icon="slotProps">
      {{ slotProps }}
      <SpinnerIcon :class="slotProps.class" />
    </template>
  </Button>
</template>

The issue is I am expecting the class to be passed through the slots as scoped props but they are not.

Am I doing something wrong, or is this not the function?

[github-actions]

We're unable to replicate your issue, if you are able to create a reproducer or add details please edit this issue. This issue will be closed if no activities in 20 days.