vueless 0.0.554 → 0.0.556

package/composables/useUI.ts

@@ -1,15 +1,4 @@
-import {
-  ref,
-  watch,
-  watchEffect,
-  getCurrentInstance,
-  toValue,
-  useAttrs,
-  Comment,
-  Text,
-  Fragment,
-  computed,
-} from "vue";
+import { ref, watch, watchEffect, getCurrentInstance, toValue, useAttrs, computed } from "vue";
 
 import { cx, cva, setColor, getColor, vuelessConfig, getMergedConfig } from "../utils/ui.ts";
 import { isCSR } from "../utils/helper.ts";
@@ -17,10 +6,11 @@ import {
   STRATEGY_TYPE,
   CVA_CONFIG_KEY,
   SYSTEM_CONFIG_KEY,
-  NESTED_COMPONENT_REG_EXP,
+  NESTED_COMPONENT_PATTERN_REG_EXP,
+  EXTENDS_PATTERN_REG_EXP,
 } from "../constants.js";
 
-import type { ComponentInternalInstance, Slot, VNode, ComputedRef } from "vue";
+import type { ComponentInternalInstance, ComputedRef } from "vue";
 import type {
   BrandColors,
   Strategies,
@@ -30,8 +20,8 @@ import type {
   ComponentNames,
   CVA,
   KeyAttrs,
-  KeysToExtend,
   ExtendedKeyClasses,
+  KeysAttrs,
 } from "../types.ts";
 
 /**
@@ -77,6 +67,7 @@ export default function useUI<T>(
    */
   function getClasses(key: string, mutatedProps: UnknownObject): ComputedRef<string> {
     return computed(() => {
+      const mutatedPropsValue = toValue(mutatedProps);
       const color = (toValue(mutatedProps)?.color as BrandColors) || props?.color;
       const value = config.value[key] as (CVA & NestedComponent) | string;
 
@@ -85,7 +76,7 @@ export default function useUI<T>(
       if (typeof value === "object" && isCVA(value)) {
         classes = cva(value)({
           ...props,
-          ...toValue(mutatedProps),
+          ...mutatedPropsValue,
           ...(color ? { color: getColor(color) } : {}),
         });
       }
@@ -118,33 +109,35 @@ export default function useUI<T>(
   }
 
   /**
-   * Get an object where:
+   * Returns an object where:
    * – key: elementKey
    * – value: reactive object of string element attributes (with classes).
    */
-  function getKeysAttrs(
-    mutatedProps = {},
-    extendingKeys: string[] = [],
-    keysToExtendConfig: Record<string, KeysToExtend> = {},
-  ) {
-    const keysToExtend = Object.keys(keysToExtendConfig);
-    const keysAttrs: UnknownObject = {};
+  function getKeysAttrs(mutatedProps = {}): KeysAttrs {
+    const keysAttrs: KeysAttrs = {};
 
-    for (const key in defaultConfig) {
-      if (isSystemKey(key) || extendingKeys.includes(key)) continue;
+    for (const key in config.value) {
+      if (isSystemKey(key)) continue;
 
       keysAttrs[`${key}Attrs`] = getAttrs(key, getClasses(key, mutatedProps));
 
-      if (keysToExtend.includes(key)) {
-        const { base, extend } = keysToExtendConfig[key];
+      const baseClasses = getBaseClasses(config.value[key]);
+      const extendsMatches = baseClasses.match(EXTENDS_PATTERN_REG_EXP);
+
+      if (extendsMatches) {
+        // retrieves extends keys from patterns:
+        // Example: `{>someKey} {>someOtherKey}` >>> `["someKey", "someOtherKey"]`.
+        const extendsKeys = extendsMatches.map((pattern) => pattern.slice(2, -1));
+        const classes = getExtendingKeysClasses(extendsKeys, mutatedProps);
+        const extendsClasses = Object.values(classes).map((item) => toValue(item));
+
         const keyAttrs = keysAttrs[`${key}Attrs`] as ComputedRef<KeyAttrs>;
 
         keysAttrs[`${key}Attrs`] = computed(() => ({
           ...keyAttrs.value,
           class: cx([
-            ...(Array.isArray(base) ? toValue(base) : [toValue(base)]),
-            keyAttrs.value.class,
-            ...(Array.isArray(extend) ? toValue(extend) : [toValue(extend)]),
+            ...extendsClasses,
+            keyAttrs.value.class?.replaceAll(EXTENDS_PATTERN_REG_EXP, ""),
           ]),
         }));
       }
@@ -157,7 +150,7 @@ export default function useUI<T>(
    * Get an element attributes for a given key.
    */
   function getAttrs(configKey: string, classes: ComputedRef) {
-    const nestedComponent = getNestedComponent(defaultConfig[configKey] || "");
+    const nestedComponent = getNestedComponent(config.value[configKey] || "");
 
     const attrs = useAttrs();
     const isDev = isCSR && import.meta.env?.DEV;
@@ -198,12 +191,7 @@ export default function useUI<T>(
     return vuelessAttrs;
   }
 
-  return {
-    config,
-    getKeysAttrs,
-    getExtendingKeysClasses,
-    hasSlotContent,
-  };
+  return { config, getKeysAttrs };
 }
 
 /**
@@ -221,7 +209,8 @@ function getNestedComponent(value: string | NestedComponent | CVA) {
   const component = (value as NestedComponent)?.component as ComponentNames;
 
   const match =
-    classes.match(NESTED_COMPONENT_REG_EXP) || component?.match(NESTED_COMPONENT_REG_EXP);
+    classes.match(NESTED_COMPONENT_PATTERN_REG_EXP) ||
+    component?.match(NESTED_COMPONENT_PATTERN_REG_EXP);
 
   return match ? match[1] : "";
 }
@@ -243,28 +232,3 @@ function isCVA(config: UnknownObject): boolean {
     Object.keys(config).some((key) => key === value),
   );
 }
-
-/**
- * Check if slot defined, and have a content.
- */
-export function hasSlotContent(slot: Slot | undefined | null, props = {}): boolean {
-  type Args = VNode | VNode[] | undefined | null;
-
-  const asArray = (arg: Args) => {
-    return Array.isArray(arg) ? arg : arg != null ? [arg] : [];
-  };
-
-  const isVNodeEmpty = (vnode: Args) => {
-    return (
-      !vnode ||
-      asArray(vnode).every(
-        (vnode) =>
-          vnode.type === Comment ||
-          (vnode.type === Text && !vnode.children?.length) ||
-          (vnode.type === Fragment && !vnode.children?.length),
-      )
-    );
-  };
-
-  return !isVNodeEmpty(slot?.(props));
-}

package/constants.js

@@ -154,7 +154,11 @@ export const COMPONENTS = {
   UDot: "ui.other-dot",
 };
 
-/* Extending Tailwind Merge by vueless custom tailwind classes. */
+/**
+ * Extending Tailwind Merge by vueless custom tailwind classes.
+ * All lists of rules available here:
+ * https://github.com/dcastil/tailwind-merge/blob/v2.3.0/src/lib/default-config.ts
+ */
 export const TAILWIND_MERGE_EXTENSION = {
   extend: {
     theme: {
@@ -166,6 +170,20 @@ export const TAILWIND_MERGE_EXTENSION = {
       "ring-offset-color": [{ "ring-offset": ["color-dynamic"] }],
       "font-size": [{ text: ["2xs"] }],
       rounded: [{ rounded: ["dynamic"] }],
+      "rounded-s": [{ "rounded-s": ["dynamic"] }],
+      "rounded-e": [{ "rounded-e": ["dynamic"] }],
+      "rounded-t": [{ "rounded-t": ["dynamic"] }],
+      "rounded-r": [{ "rounded-r": ["dynamic"] }],
+      "rounded-b": [{ "rounded-b": ["dynamic"] }],
+      "rounded-l": [{ "rounded-l": ["dynamic"] }],
+      "rounded-ss": [{ "rounded-ss": ["dynamic"] }],
+      "rounded-se": [{ "rounded-se": ["dynamic"] }],
+      "rounded-ee": [{ "rounded-ee": ["dynamic"] }],
+      "rounded-es": [{ "rounded-es": ["dynamic"] }],
+      "rounded-tl": [{ "rounded-tl": ["dynamic"] }],
+      "rounded-tr": [{ "rounded-tr": ["dynamic"] }],
+      "rounded-br": [{ "rounded-br": ["dynamic"] }],
+      "rounded-bl": [{ "rounded-bl": ["dynamic"] }],
     },
   },
 };
@@ -200,7 +218,8 @@ export const VUELESS_ICONS_CACHED_DIR = `${VUELESS_CACHE_DIR}/${ICONS_DIR}`;
 
 /* Other */
 export const PX_IN_REM = 16;
-export const NESTED_COMPONENT_REG_EXP = /\{U[^}]*}/g;
+export const NESTED_COMPONENT_PATTERN_REG_EXP = /\{U[^}]*}/g;
+export const EXTENDS_PATTERN_REG_EXP = /\{>[^}]*}/g;
 export const DYNAMIC_COLOR_PATTERN = "{color}";
 export const TAILWIND_COLOR_OPACITY_DELIMITER = "/";
 export const TAILWIND_VARIANT_DELIMITER = ":";

package/index.d.ts

@@ -2,7 +2,14 @@ import type { App } from "vue";
 import type { CreateVuelessOptions } from "./types.ts";
 export { setTheme } from "./utils/theme.ts";
 export { cx, cva, compose } from "./utils/ui.ts";
-export { isSSR, isCSR, getRandomId, setTitle, createDebounce } from "./utils/helper.ts";
+export {
+  isSSR,
+  isCSR,
+  getRandomId,
+  setTitle,
+  createDebounce,
+  hasSlotContent,
+} from "./utils/helper.ts";
 export { isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows } from "./utils/platform.ts";
 export { default as createVueI18nAdapter } from "./adatper.locale/vue-i18n.js";
 export { default as defaultEnLocale } from "./adatper.locale/locales/en.js";

package/index.ts

@@ -9,7 +9,7 @@ import type { CreateVuelessOptions } from './types.ts'
 
 export { setTheme } from "./utils/theme.ts";
 export { cx, cva, compose } from "./utils/ui.ts";
-export { isSSR, isCSR, getRandomId, setTitle, createDebounce } from "./utils/helper.ts";
+export { isSSR, isCSR, getRandomId, setTitle, createDebounce, hasSlotContent } from "./utils/helper.ts";
 export { isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows } from "./utils/platform.ts";
 export { default as createVueI18nAdapter } from "./adatper.locale/vue-i18n.js";
 export { default as defaultEnLocale } from "./adatper.locale/locales/en.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.554",
+  "version": "0.0.556",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/types.ts

@@ -1,5 +1,3 @@
-import { hasSlotContent } from "./composables/useUI.ts";
-
 import UTextDefaultConfig from "./ui.text-block/config.ts";
 import UAlertDefaultConfig from "./ui.text-alert/config.ts";
 import UEmptyDefaultConfig from "./ui.text-empty/config.ts";
@@ -46,7 +44,7 @@ import UCheckboxMultiStateConfig from "./ui.form-checkbox-multi-state/config.ts"
 import URadioConfig from "./ui.form-radio/config.ts";
 import URadioGroupConfig from "./ui.form-radio-group/config.ts";
 
-import type { ComputedRef, MaybeRef, Ref } from "vue";
+import type { MaybeRef, Ref } from "vue";
 import type { Props } from "tippy.js";
 import type { LocaleOptions } from "./adatper.locale/vueless.ts";
 
@@ -256,10 +254,11 @@ export interface VueAttrs {
   value?: string;
 }
 
+export type KeysAttrs = Record<string, Ref<UnknownObject | undefined>>;
+
 export interface UseAttrs<TConfig> {
-  hasSlotContent: typeof hasSlotContent;
   config: Ref<TConfig | undefined>;
-  [key: string]: Ref<TConfig | undefined> | typeof hasSlotContent;
+  [key: string]: Ref<TConfig | undefined>;
 }
 
 export interface KeyAttrs extends VueAttrs {
@@ -271,11 +270,6 @@ export interface KeyAttrs extends VueAttrs {
   [key: string]: string | UnknownObject | undefined | null;
 }
 
-export interface KeysToExtend {
-  base?: ComputedRef;
-  extend?: ComputedRef;
-}
-
 export interface CreateVuelessOptions {
   i18n?: LocaleOptions;
 }

package/ui.button/UButton.vue

@@ -1,16 +1,18 @@
 <script setup lang="ts">
-import { computed, ref, watchEffect, useId, watch } from "vue";
+import { computed, ref, watchEffect, useId, watch, useSlots } from "vue";
 
+import useUI from "../composables/useUI.ts";
 import { useDarkMode } from "../composables/useDarkMode.ts";
+import { hasSlotContent } from "../utils/helper.ts";
 import { getDefault } from "../utils/ui.ts";
+
 import ULoader from "../ui.loader/ULoader.vue";
 import UIcon from "../ui.image-icon/UIcon.vue";
 
 import defaultConfig from "./config.ts";
-import useAttrs from "./useAttrs.ts";
 import { UButton } from "./constants.ts";
 
-import type { UButtonProps, LoaderSize, IconSize } from "./types.ts";
+import type { UButtonProps, LoaderSize, IconSize, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
@@ -30,13 +32,10 @@ const props = withDefaults(defineProps<UButtonProps>(), {
   dataTest: "",
 });
 
+const slots = useSlots();
 const elementId = props.id || useId();
-
 const { isDarkMode } = useDarkMode();
 
-const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs } =
-  useAttrs(props);
-
 const buttonRef = ref<HTMLElement | null>(null);
 const buttonStyle = ref({});
 const buttonWidth = ref(0);
@@ -102,6 +101,21 @@ defineExpose({
    */
   buttonRef,
 });
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const { getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
+
+const mutatedProps = computed(() => ({
+  leftIcon: Boolean(props.leftIcon) || hasSlotContent(slots["left"]),
+  rightIcon: Boolean(props.rightIcon) || hasSlotContent(slots["right"]),
+  label: Boolean(props.label),
+}));
+
+const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs } =
+  getKeysAttrs(mutatedProps);
 </script>
 
 <template>

package/ui.button-link/ULink.vue

@@ -83,7 +83,17 @@ const { route, isActive, isExactActive } = useLink(useLinkOptions);
 
 const wrapperRef = ref(null);
 
-const { wrapperAttrs, linkAttrs } = useAttrs(props, { isActive, isExactActive });
+const { wrapperAttrs, linkAttrs } = useAttrs(props);
+
+const wrapperActiveClasses = computed(() => [
+  isActive.value && props.wrapperActiveClass,
+  isExactActive.value && props.wrapperExactActiveClass,
+]);
+
+const linkActiveClasses = computed(() => [
+  isActive.value && props.activeClass,
+  isExactActive.value && props.exactActiveClass,
+]);
 
 const targetValue = computed(() => {
   return props.targetBlank ? "_blank" : "_self";
@@ -129,7 +139,7 @@ defineExpose({
 </script>
 
 <template>
-  <div v-bind="wrapperAttrs" ref="wrapperRef" tabindex="-1">
+  <div v-bind="wrapperAttrs" ref="wrapperRef" :class="wrapperActiveClasses" tabindex="-1">
     <!-- @slot Use it to add something before the label. -->
     <slot name="left" />
 
@@ -138,6 +148,7 @@ defineExpose({
       :to="route"
       :target="targetValue"
       v-bind="linkAttrs"
+      :class="linkActiveClasses"
       :data-test="dataTest"
       tabindex="0"
       @blur="onBlur"
@@ -157,6 +168,7 @@ defineExpose({
       :href="prefixedHref"
       :target="targetValue"
       v-bind="linkAttrs"
+      :class="linkActiveClasses"
       :data-test="dataTest"
       tabindex="0"
       @blur="onBlur"

package/ui.button-link/config.ts

@@ -17,6 +17,9 @@ export default /*tw*/ {
       disabled: {
         true: "!ring-0 !ring-offset-0 cursor-not-allowed",
       },
+      defaultSlot: {
+        true: "flex items-center focus-within:ring-0 focus-within:ring-offset-0",
+      },
       noRing: {
         true: "!ring-0 !ring-offset-0",
       },
@@ -59,9 +62,11 @@ export default /*tw*/ {
       disabled: {
         true: "text-gray-400 pointer-events-none",
       },
+      defaultSlot: {
+        true: "flex items-center no-underline hover:no-underline",
+      },
     },
   },
-  linkWithChild: "flex items-center no-underline hover:no-underline focus-within:ring-0 focus-within:ring-offset-0",
   defaults: {
     color: "brand",
     type: "link",

package/ui.button-link/useAttrs.ts

@@ -1,51 +1,20 @@
 import { computed, useSlots } from "vue";
 import useUI from "../composables/useUI.ts";
+import { hasSlotContent } from "../utils/helper.ts";
 
 import defaultConfig from "./config.ts";
 
-import type { Ref } from "vue";
 import type { UseAttrs } from "../types.ts";
 import type { ULinkProps, Config } from "./types.ts";
 
-type ComponentState = {
-  isActive: Ref<boolean>;
-  isExactActive: Ref<boolean>;
-};
-
-export default function useAttrs(
-  props: ULinkProps,
-  { isActive, isExactActive }: ComponentState,
-): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI<Config>(
-    defaultConfig,
-    () => props.config,
-    "link",
-  );
+export default function useAttrs(props: ULinkProps): UseAttrs<Config> {
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config, "link");
   const slots = useSlots();
 
-  const extendingKeys = ["linkWithChild"];
-  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
-
-  const keysAttrs = getKeysAttrs({}, extendingKeys, {
-    wrapper: {
-      extend: computed(() => [
-        hasSlotContent(slots["default"]) && extendingKeysClasses.linkWithChild.value,
-        isActive.value && props.wrapperActiveClass,
-        isExactActive.value && props.wrapperExactActiveClass,
-      ]),
-    },
-    link: {
-      extend: computed(() => [
-        hasSlotContent(slots["default"]) && extendingKeysClasses.linkWithChild.value,
-        isActive.value && props.activeClass,
-        isExactActive.value && props.exactActiveClass,
-      ]),
-    },
-  });
+  const mutatedProps = computed(() => ({
+    /* component state, not a props */
+    defaultSlot: hasSlotContent(slots["default"]),
+  }));
 
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs(mutatedProps) };
 }

package/ui.button-toggle/useAttrs.ts

@@ -6,13 +6,7 @@ import type { UseAttrs } from "../types.ts";
 import type { UToggleProps, Config } from "./types.ts";
 
 export default function useAttrs(props: UToggleProps): 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.button-toggle-item/config.ts

@@ -10,7 +10,10 @@ export default /*tw*/ {
     `,
     variants: {
       separated: {
-        false: "rounded-none",
+        false: "rounded-none focus:ring-0",
+      },
+      selected: {
+        false: "relative disabled:z-10",
       },
       variant: {
         thirdary: `
@@ -19,16 +22,11 @@ export default /*tw*/ {
         `,
       },
     },
-  },
-  toggleButtonActive: {
-    base: "relative disabled:z-10",
-    variants: {
-      variant: {
-        primary: "!text-white bg-brand-600 border-brand-600",
-        secondary: "text-brand-600 border-brand-600 bg-brand-600/10",
-        thirdary: "!bg-brand-600/20",
-      },
-    },
+    compoundVariants: [
+      { selected: true, variant: "primary", class: "!text-white bg-brand-600 !border-brand-600" },
+      { selected: true, variant: "secondary", class: "text-brand-600 border-brand-600 bg-brand-600/10" },
+      { selected: true, variant: "thirdary", class: "!bg-brand-600/20" },
+    ],
   },
   toggleInput: "p-0 m-0 size-0 invisible absolute",
   defaults: {

package/ui.button-toggle-item/useAttrs.ts

@@ -16,28 +16,14 @@ export default function useAttrs(
   props: UToggleItemProps,
   { isSelected, separated, variant }: itemState,
 ): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI<Config>(
-    defaultConfig,
-    () => props.config,
-  );
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
 
   const mutatedProps = computed(() => ({
     variant: toValue(variant),
     separated: toValue(separated),
+    /* component state, not a props */
+    selected: isSelected.value,
   }));
 
-  const extendingKeys = ["toggleButtonActive"];
-  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys, mutatedProps);
-
-  const keysAttrs = getKeysAttrs(mutatedProps, extendingKeys, {
-    toggleButton: {
-      extend: computed(() => [isSelected.value && extendingKeysClasses.toggleButtonActive.value]),
-    },
-  });
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs(mutatedProps) };
 }

package/ui.container-accordion/config.ts

@@ -19,9 +19,11 @@ export default /*tw*/ {
         md: "text-sm",
         lg: "text-base",
       },
+      opened: {
+        true: "pt-2 h-fit opacity-100",
+      },
     },
   },
-  descriptionShown: "pt-2 h-fit opacity-100",
   toggleIcon: "{UIcon}",
   divider: "{UDivider} group-last:hidden",
   defaults: {

package/ui.container-accordion/useAttrs.ts

@@ -15,23 +15,12 @@ export default function useAttrs(
   props: UAccordionProps,
   { isOpened }: ComponentState,
 ): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI<Config>(
-    defaultConfig,
-    () => props.config,
-  );
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
 
-  const extendingKeys = ["descriptionShown"];
-  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
+  const mutatedProps = computed(() => ({
+    /* component state, not a props */
+    opened: isOpened.value,
+  }));
 
-  const keysAttrs = getKeysAttrs({}, extendingKeys, {
-    description: {
-      extend: computed(() => [isOpened.value && extendingKeysClasses.descriptionShown.value]),
-    },
-  });
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs(mutatedProps) };
 }

package/ui.container-card/UCard.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed, useSlots } from "vue";
 
+import { hasSlotContent } from "../utils/helper.ts";
+
 import UHeader from "../ui.text-header/UHeader.vue";
 import UDivider from "../ui.container-divider/UDivider.vue";
 
@@ -28,7 +30,6 @@ const isShownFooter = computed(() => {
 });
 
 const {
-  hasSlotContent,
   wrapperAttrs,
   titleAttrs,
   dividerAttrs,

package/ui.container-card/useAttrs.ts

@@ -6,13 +6,7 @@ import type { UseAttrs } from "../types.ts";
 import type { UCardProps, Config } from "./types.ts";
 
 export default function useAttrs(props: UCardProps): 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.container-col/useAttrs.ts

@@ -6,13 +6,7 @@ import type { UseAttrs } from "../types.ts";
 import type { UColProps, Config } from "./types.ts";
 
 export default function useAttrs(props: UColProps): 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() };
 }