vueless 0.0.556 → 0.0.557

package/composables/useUI.ts

@@ -19,9 +19,10 @@ import type {
   NestedComponent,
   ComponentNames,
   CVA,
+  UseUI,
   KeyAttrs,
-  ExtendedKeyClasses,
   KeysAttrs,
+  ExtendedKeyClasses,
 } from "../types.ts";
 
 /**
@@ -35,7 +36,8 @@ export default function useUI<T>(
   defaultConfig: T & Component,
   propsConfigGetter?: () => (T & Component) | undefined,
   topLevelClassKey?: string,
-) {
+  mutatedProps?: ComputedRef,
+): UseUI<T> {
   const { type, props } = getCurrentInstance() as ComponentInternalInstance;
   const componentName = type.__name as ComponentNames;
   const globalConfig = vuelessConfig?.component?.[componentName] || {};
@@ -48,7 +50,7 @@ export default function useUI<T>(
     : (STRATEGY_TYPE.merge as Strategies);
 
   const firstClassKey = defaultConfig ? Object.keys(defaultConfig)[0] : "";
-  const config = ref({} as T);
+  const config = ref({} as T & Component);
   const attrs = useAttrs();
 
   watchEffect(() => {
@@ -191,7 +193,7 @@ export default function useUI<T>(
     return vuelessAttrs;
   }
 
-  return { config, getKeysAttrs };
+  return { config, getKeysAttrs, ...getKeysAttrs(mutatedProps) };
 }
 
 /**

package/package.json

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

package/types.ts

@@ -44,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 { MaybeRef, Ref } from "vue";
+import type { ComputedRef, MaybeRef, Ref, UnwrapRef } from "vue";
 import type { Props } from "tippy.js";
 import type { LocaleOptions } from "./adatper.locale/vueless.ts";
 
@@ -227,6 +227,19 @@ export interface NestedComponent {
   [key: string]: Record<string, string | object> | string;
 }
 
+export type ComponentConfig<T> = [T & Component] extends [Ref]
+  ? Ref<T & Component>
+  : Ref<UnwrapRef<T & Component>, T & Component>;
+
+export interface UseUI<T> {
+  config: ComponentConfig<T>;
+  getKeysAttrs: (mutatedProps?: ComputedRef) => KeysAttrs;
+  [key: string]:
+    | ComputedRef<KeyAttrs>
+    | ComponentConfig<T>
+    | ((mutatedProps?: ComputedRef) => KeysAttrs);
+}
+
 export interface Transition {
   enterFromClass?: string;
   enterActiveClass?: string;

package/ui.button/UButton.vue

@@ -106,16 +106,18 @@ defineExpose({
  * 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);
+const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs } = useUI<Config>(
+  defaultConfig,
+  () => props.config,
+  "",
+  mutatedProps,
+);
 </script>
 
 <template>

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.556",
+  "version": "0.0.557",
   "contributions": {
     "html": {
       "description-markup": "markdown",