vueless 0.0.555 → 0.0.556

package/ui.dropdown-link/useAttrs.ts

@@ -1,36 +1,26 @@
-import { computed, type Ref } from "vue";
+import { computed } from "vue";
 import useUI from "../composables/useUI.ts";
 
 import defaultConfig from "./config.ts";
 
+import type { Ref } from "vue";
 import type { Config, UDropdownLinkProps } from "./types.ts";
 import type { UseAttrs } from "../types.ts";
 
-interface DropdownLinkState {
+interface ComponentState {
   isShownOptions: Ref<boolean>;
 }
 
 export default function useAttrs(
   props: UDropdownLinkProps,
-  { isShownOptions }: DropdownLinkState,
+  { isShownOptions }: ComponentState,
 ): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
-    defaultConfig,
-    () => props.config,
-  );
+  const { config, getKeysAttrs } = useUI(defaultConfig, () => props.config);
 
-  const extendingKeys = ["wrapperActive"];
-  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
+  const mutatedProps = computed(() => ({
+    /* component state, not a props */
+    opened: isShownOptions.value,
+  }));
 
-  const keysAttrs = getKeysAttrs({}, extendingKeys, {
-    wrapper: {
-      extend: computed(() => [isShownOptions.value && extendingKeysClasses.wrapperActive.value]),
-    },
-  });
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs(mutatedProps) };
 }

package/ui.dropdown-list/config.ts

@@ -39,12 +39,13 @@ export default /*tw*/ {
     },
   },
   group: `
+    {>groupBase}
     border-t border-gray-100 group-first/item:border-none
     mt-1.5 group-first/item:mt-0
     pt-4 group-first/item:pt-2
   `,
-  subGroup: "pt-2",
-  addOptionLabelWrapper: "-mb-[1.375rem] active:bg-brand-100",
+  subGroup: "{>groupBase} pt-2",
+  addOptionLabelWrapper: "{>option} -mb-[1.375rem] active:bg-brand-100",
   addOptionLabel: "leading-none font-medium",
   addOptionLabelHotkey: "text-gray-500",
   addOptionButton: "{UButton} !leading-none sticky left-[calc(100%-2.15rem)] bottom-2 p-1",

package/ui.dropdown-list/useAttrs.ts

@@ -1,4 +1,3 @@
-import { computed } from "vue";
 import useUI from "../composables/useUI.ts";
 
 import defaultConfig from "./config.ts";
@@ -7,29 +6,7 @@ import type { Config, UDropdownListProps } from "./types.ts";
 import type { UseAttrs } from "../types.ts";
 
 export default function useAttrs(props: UDropdownListProps): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
-    defaultConfig,
-    () => props.config,
-  );
+  const { config, getKeysAttrs } = useUI(defaultConfig, () => props.config);
 
-  const extendingKeys = ["option", "groupBase"];
-  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
-
-  const keysAttrs = getKeysAttrs({}, [], {
-    addOptionLabelWrapper: {
-      base: computed(() => [extendingKeysClasses.option.value]),
-    },
-    group: {
-      base: computed(() => [extendingKeysClasses.groupBase.value]),
-    },
-    subGroup: {
-      base: computed(() => [extendingKeysClasses.groupBase.value]),
-    },
-  });
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.form-calendar/useAttrs.ts

@@ -6,13 +6,7 @@ import type { UseAttrs } from "../types.ts";
 import type { UCalendarProps, Config } from "./types.ts";
 
 export default function useAttrs(props: UCalendarProps<unknown>): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
 
-  const keysAttrs = getKeysAttrs();
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.form-checkbox/useAttrs.ts

@@ -16,7 +16,7 @@ export default function useAttrs(
   props: UCheckboxProps,
   { checkboxColor, checkboxSize }: ComponentState,
 ): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
 
   const mutatedProps = computed(() => ({
     color: checkboxColor.value,
@@ -25,11 +25,5 @@ export default function useAttrs(
     error: Boolean(props.error),
   }));
 
-  const keysAttrs = getKeysAttrs(mutatedProps);
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs(mutatedProps) };
 }

package/ui.form-checkbox-group/useAttrs.ts

@@ -6,13 +6,7 @@ import type { UseAttrs } from "../types.ts";
 import type { UCheckboxGroupProps, Config } from "./types.ts";
 
 export default function useAttrs(props: UCheckboxGroupProps): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
 
-  const keysAttrs = getKeysAttrs();
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.form-checkbox-multi-state/useAttrs.ts

@@ -15,7 +15,7 @@ export default function useAttrs(
   props: UCheckboxMultiStateProps,
   { selected }: ComponentState,
 ): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
   const keysAttrs = getKeysAttrs();
 
   const checkboxAttrs = keysAttrs.multiStateCheckboxAttrs as Ref<{
@@ -33,9 +33,5 @@ export default function useAttrs(
     return checkboxAttrs.value;
   });
 
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...keysAttrs };
 }

package/ui.form-color-picker/useAttrs.js

@@ -3,13 +3,7 @@ import useUI from "../composables/useUI.ts";
 import defaultConfig from "./config.js";
 
 export default function useAttrs(props) {
-  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI(defaultConfig, () => props.config);
 
-  const keysAttrs = getKeysAttrs();
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.form-date-picker/useAttrs.ts

@@ -18,7 +18,7 @@ export default function useAttrs(
   props: UDatePickerProps<unknown>,
   { isTop, isRight }: ComponentState,
 ): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI(defaultConfig, () => props.config);
 
   const mutatedProps = computed(() => ({
     openDirectionY: isTop.value ? Direction.Top : Direction.Bottom,
@@ -39,9 +39,5 @@ export default function useAttrs(
     }
   });
 
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...keysAttrs };
 }

package/ui.form-date-picker-range/UDatePickerRange.vue

@@ -130,34 +130,6 @@ const isPeriod = computed(() => {
 
 const elementId = props.id || useId();
 
-const {
-  config,
-  wrapperAttrs,
-  calendarAttrs,
-  datepickerInputAttrs,
-  menuAttrs,
-  buttonWrapperAttrs,
-  buttonAttrs,
-  shiftRangeButtonAttrs,
-  rangeInputWrapperAttrs,
-  rangeInputErrorAttrs,
-  datepickerActiveInputAttrs,
-  rangeInputFirstAttrs,
-  rangeInputLastAttrs,
-  periodRowAttrs,
-  periodButtonAttrs,
-  periodButtonActiveAttrs,
-  periodDateAttrs,
-  periodDateCurrentAttrs,
-  periodDateSelectedAttrs,
-  periodDateCurrentSelectedAttrs,
-  periodDateListAttrs,
-  rangeSwitchButtonAttrs,
-  rangeSwitchTitleAttrs,
-  rangeSwitchWrapperAttrs,
-  customRangeDescriptionAttrs,
-} = useAttrs(props, { isShownMenu, isTop, isRight, isPeriod });
-
 const calendarValue = ref(props.modelValue);
 const activeDate: Ref<string | Date | null> = ref(
   props.modelValue.from !== null
@@ -249,6 +221,34 @@ const clickOutsideOptions = computed(() => {
   };
 });
 
+const {
+  config,
+  wrapperAttrs,
+  calendarAttrs,
+  datepickerInputAttrs,
+  menuAttrs,
+  buttonWrapperAttrs,
+  buttonAttrs,
+  shiftRangeButtonAttrs,
+  rangeInputWrapperAttrs,
+  rangeInputErrorAttrs,
+  datepickerActiveInputAttrs,
+  rangeInputFirstAttrs,
+  rangeInputLastAttrs,
+  periodRowAttrs,
+  periodButtonAttrs,
+  periodButtonActiveAttrs,
+  periodDateAttrs,
+  periodDateCurrentAttrs,
+  periodDateSelectedAttrs,
+  periodDateCurrentSelectedAttrs,
+  periodDateListAttrs,
+  rangeSwitchButtonAttrs,
+  rangeSwitchTitleAttrs,
+  rangeSwitchWrapperAttrs,
+  customRangeDescriptionAttrs,
+} = useAttrs(props, { isShownMenu, isTop, isRight, isPeriod });
+
 const { userFormatDate } = useUserFormat(
   localValue,
   userFormatLocale,

package/ui.form-date-picker-range/config.ts

@@ -12,13 +12,21 @@ export default /*tw*/ {
       },
     },
   },
-  buttonWrapper: `
-    flex rounded-dynamic max-md:justify-between
-    focus-within:ring-dynamic focus-within:ring-offset-dynamic focus-within:ring-brand-700/15
-  `,
-  button: "{UButton} shrink-0 grow rounded-none",
-  buttonActive: "",
-  buttonWrapperActive: "ring-dynamic ring-offset-dynamic ring-brand-700/15",
+  buttonWrapper: {
+    base: `
+      flex rounded-dynamic max-md:justify-between
+      focus-within:ring-dynamic focus-within:ring-offset-dynamic focus-within:ring-brand-700/15
+    `,
+    variants: {
+      opened: {
+        true: "ring-dynamic ring-offset-dynamic ring-brand-700/15",
+      },
+    },
+  },
+  button: {
+    component: "{UButton}",
+    base: "shrink-0 grow rounded-none",
+  },
   shiftRangeButton: `
     first:rounded-dynamic first:rounded-r-none
     last:rounded-dynamic last:rounded-l-none
@@ -57,19 +65,25 @@ export default /*tw*/ {
   },
   periodRow: "mb-1 flex min-w-64 gap-1",
   periodButton: "{UButton} h-[3.125rem] w-full",
-  periodButtonActive: "!bg-gray-800/20",
+  periodButtonActive: "{>periodButton} !bg-gray-800/20",
   rangeSwitchWrapper: "flex items-center justify-between py-2",
   rangeSwitchButton: "{UButton}",
   rangeSwitchTitle: "font-medium text-sm",
-  periodDateList: "",
-  periodDateMonthList: "grid grid-cols-3 grid-rows-1 gap-0.5",
-  periodDateWeekList: "",
-  periodDateYearList: "grid grid-cols-3 grid-rows-1 gap-0.5",
-  periodDateQuarterList: "",
+  periodDateList: {
+    base: "grid grid-rows-1 gap-0.5",
+    variants: {
+      month: {
+        true: "grid-cols-3",
+      },
+      year: {
+        true: "grid-cols-3",
+      },
+    },
+  },
   periodDate: "w-full",
-  periodDateSelected: "",
-  periodDateCurrent: "border-2 border-brand-600",
-  periodDateCurrentSelected: "",
+  periodDateSelected: "{>periodDate}",
+  periodDateCurrent: "{>periodDate} border-2 border-brand-600",
+  periodDateCurrentSelected: "{>periodDate} {>periodDateSelected} {>periodDateCurrent}",
   customRangeDescription: "",
   rangeInputWrapper: "flex mt-4 -space-x-px group/range-input-wrapper",
   rangeInputFirst: {

package/ui.form-date-picker-range/useAttrs.ts

@@ -22,79 +22,22 @@ export default function useAttrs(
   props: UDatePickerRangeProps<unknown>,
   { isShownMenu, isTop, isRight, isPeriod }: DatePickerRangeState,
 ): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
-    defaultConfig,
-    () => props.config,
-  );
+  const { config, getKeysAttrs } = useUI(defaultConfig, () => props.config);
 
   const mutatedProps = computed(() => ({
     openDirectionY: isTop.value ? Direction.Top : Direction.Bottom,
     openDirectionX: isRight.value ? Direction.Right : Direction.Left,
     error: Boolean(props.error),
     description: Boolean(props.description),
+    /* component state, not a props */
+    opened: isShownMenu.value,
+    week: isPeriod.value.week,
+    month: isPeriod.value.month,
+    quarter: isPeriod.value.quarter,
+    year: isPeriod.value.year,
   }));
 
-  const extendingKeys = ["buttonWrapperActive", "buttonActive", "periodDateMonthList"];
-  const extendingKeysClasses = getExtendingKeysClasses(
-    [
-      ...extendingKeys,
-      "periodButton",
-      "periodDateList",
-      "periodDate",
-      "periodDateWeekList",
-      "periodDateQuarterList",
-      "periodDateYearList",
-      "periodDateSelected",
-      "periodDateCurrent",
-    ],
-    mutatedProps,
-  );
-
-  // TODO: Declare types for getKeysAttrs return value, this could be implemented using generic;
-  const keysAttrs = getKeysAttrs(mutatedProps, extendingKeys, {
-    buttonWrapper: {
-      extend: computed(() => [isShownMenu.value && extendingKeysClasses.buttonWrapperActive.value]),
-    },
-    button: {
-      extend: computed(() => [isShownMenu.value && extendingKeysClasses.buttonActive.value]),
-    },
-    periodDateList: {
-      extend: computed(() => [
-        isPeriod.value.week && extendingKeysClasses.periodDateWeekList.value,
-        isPeriod.value.month && extendingKeysClasses.periodDateMonthList.value,
-        isPeriod.value.quarter && extendingKeysClasses.periodDateQuarterList.value,
-        isPeriod.value.year && extendingKeysClasses.periodDateYearList.value,
-      ]),
-    },
-    periodButtonActive: {
-      base: computed(() => [extendingKeysClasses.periodButton.value]),
-    },
-    periodDateWeekList: {
-      base: computed(() => [extendingKeysClasses.periodDateList.value]),
-    },
-    periodDateQuarterList: {
-      base: computed(() => [extendingKeysClasses.periodDateList.value]),
-    },
-    periodDateYearList: {
-      base: computed(() => [extendingKeysClasses.periodDateList.value]),
-    },
-    periodDateSelected: {
-      base: computed(() => [extendingKeysClasses.periodDate.value]),
-    },
-    periodDateCurrent: {
-      base: computed(() => [
-        extendingKeysClasses.periodDate.value,
-        extendingKeysClasses.periodDateCurrent.value,
-      ]),
-    },
-    periodDateCurrentSelected: {
-      base: computed(() => [
-        extendingKeysClasses.periodDate.value,
-        extendingKeysClasses.periodDateSelected.value,
-        extendingKeysClasses.periodDateCurrent.value,
-      ]),
-    },
-  });
+  const keysAttrs = getKeysAttrs(mutatedProps);
 
   /* Merging DatePickerRange's i18n translations into Calendar's i18n translations. */
   watchEffect(() => {
@@ -106,9 +49,5 @@ export default function useAttrs(
     }
   });
 
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...keysAttrs };
 }

package/ui.form-input/UInput.vue

@@ -113,6 +113,7 @@ const VALIDATION_RULES_REG_EX = {
 <script setup>
 import { ref, computed, onMounted, useSlots, useId } from "vue";
 
+import { hasSlotContent } from "../utils/helper.ts";
 import { useMutationObserver } from "../composables/useMutationObserver.ts";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
@@ -358,7 +359,6 @@ const {
   leftIconAttrs,
   rightIconAttrs,
   rightIconWrapperAttrs,
-  hasSlotContent,
 } = useAttrs(props, { isTypePassword, inputPasswordClasses });
 
 const iconSize = computed(() => {

package/ui.form-input/useAttrs.js

@@ -4,18 +4,12 @@ import useUI from "../composables/useUI.ts";
 import defaultConfig from "./config.js";
 
 export default function useAttrs(props) {
-  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI(defaultConfig, () => props.config);
 
   const mutatedProps = computed(() => ({
     error: Boolean(props.error),
     label: Boolean(props.label),
   }));
 
-  const keysAttrs = getKeysAttrs(mutatedProps);
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs(mutatedProps) };
 }

package/ui.form-input-file/UInputFile.vue

@@ -96,11 +96,11 @@ import UButton from "../ui.button/UButton.vue";
 import UFiles from "../ui.text-files/UFiles.vue";
 
 import { getDefault } from "../utils/ui.ts";
-import { getFileMbSize } from "./utilFileForm.js";
-
-import useAttrs from "./useAttrs.js";
+import { hasSlotContent } from "../utils/helper.ts";
 import { useLocale } from "../composables/useLocale.ts";
 
+import useAttrs from "./useAttrs.js";
+import { getFileMbSize } from "./utilFileForm.js";
 import { UInputFile } from "./constants.js";
 import defaultConfig from "./config.js";
 
@@ -247,7 +247,6 @@ const {
   inputAttrs,
   fileListAttrs,
   buttonsAttrs,
-  hasSlotContent,
 } = useAttrs(props);
 
 const i18nGlobal = tm(UInputFile);

package/ui.form-input-file/useAttrs.js

@@ -4,18 +4,12 @@ import useUI from "../composables/useUI.ts";
 import defaultConfig from "./config.js";
 
 export default function useAttrs(props) {
-  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI(defaultConfig, () => props.config);
 
   const mutatedProps = computed(() => ({
     error: Boolean(props.error),
     label: Boolean(props.label),
   }));
 
-  const keysAttrs = getKeysAttrs(mutatedProps);
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs(mutatedProps) };
 }

package/ui.form-input-money/useAttrs.js

@@ -3,13 +3,7 @@ import useUI from "../composables/useUI.ts";
 import defaultConfig from "./config.js";
 
 export default function useAttrs(props) {
-  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI(defaultConfig, () => props.config);
 
-  const keysAttrs = getKeysAttrs();
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.form-input-number/useAttrs.js

@@ -3,13 +3,7 @@ import useUI from "../composables/useUI.ts";
 import defaultConfig from "./config.js";
 
 export default function useAttrs(props) {
-  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI(defaultConfig, () => props.config);
 
-  const keysAttrs = getKeysAttrs();
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.form-input-rating/UInputRating.vue

@@ -54,9 +54,11 @@
 <script setup>
 import { computed, ref } from "vue";
 
+import { getDefault } from "../utils/ui.ts";
+import { hasSlotContent } from "../utils/helper.ts";
+
 import UIcon from "../ui.image-icon/UIcon.vue";
 import ULabel from "../ui.form-label/ULabel.vue";
-import { getDefault } from "../utils/ui.ts";
 
 import { UInputRating } from "./constants.js";
 import defaultConfig from "./config.js";
@@ -174,16 +176,8 @@ const emit = defineEmits([
 
 const hovered = ref(null);
 
-const {
-  config,
-  inputLabelAttrs,
-  containerAttrs,
-  counterAttrs,
-  totalAttrs,
-  starsAttrs,
-  starAttrs,
-  hasSlotContent,
-} = useAttrs(props);
+const { config, inputLabelAttrs, containerAttrs, counterAttrs, totalAttrs, starsAttrs, starAttrs } =
+  useAttrs(props);
 
 const iconSize = computed(() => {
   const sizes = {

package/ui.form-input-rating/useAttrs.js

@@ -2,13 +2,7 @@ import useUI from "../composables/useUI.ts";
 import defaultConfig from "./config.js";
 
 export default function useAttrs(props) {
-  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI(defaultConfig, () => props.config);
 
-  const keysAttrs = getKeysAttrs();
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.form-input-search/useAttrs.js

@@ -3,13 +3,7 @@ import useUI from "../composables/useUI.ts";
 import defaultConfig from "./config.js";
 
 export default function useAttrs(props) {
-  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI(defaultConfig, () => props.config);
 
-  const keysAttrs = getKeysAttrs();
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.form-label/useAttrs.js

@@ -4,17 +4,11 @@ import useUI from "../composables/useUI.ts";
 import defaultConfig from "./config.js";
 
 export default function useAttrs(props) {
-  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI(defaultConfig, () => props.config);
 
   const mutatedProps = computed(() => ({
     error: Boolean(props.error),
   }));
 
-  const keysAttrs = getKeysAttrs(mutatedProps);
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs(mutatedProps) };
 }

package/ui.form-radio/useAttrs.ts

@@ -16,7 +16,7 @@ export default function useAttrs(
   props: URadioProps,
   { radioColor, radioSize }: ComponentState,
 ): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
 
   const mutatedProps = computed(() => ({
     color: radioColor.value,
@@ -25,11 +25,5 @@ export default function useAttrs(
     error: Boolean(props.error),
   }));
 
-  const keysAttrs = getKeysAttrs(mutatedProps);
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs(mutatedProps) };
 }