vueless 0.0.193 → 0.0.194

package/composable.ui/index.js

@@ -1,5 +1,6 @@
 import {
   ref,
+  watch,
   watchEffect,
   getCurrentInstance,
   toValue,
@@ -69,7 +70,6 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
   });
 
   function getAttrs(configKey, options) {
-    const cvaClasses = options?.classes || "";
     const nestedComponent = options?.isComponent || getNestedComponent(defaultConfig[configKey]); // TODO: Remove `options?.isComponent` when all `attrs.composable.js` will be migranted
 
     const attrs = useAttrs();
@@ -87,7 +87,9 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
     // Delete value key to prevent v-model overwrite
     delete commonAttrs.value;
 
-    watchEffect(() => {
+    watch(config, updateVuelessAttrs, { immediate: true });
+
+    function updateVuelessAttrs() {
       const configKeyValue = config.value[configKey];
       const isObject = typeof configKeyValue === "object";
 
@@ -97,16 +99,15 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
       };
 
       const isTopLevelClassKey = configKey === (topLevelClassKey || firstClassKey);
-
       const attrClass = isTopLevelClassKey && !nestedComponent ? attrs.class : "";
-      const configKeyClass = isObject ? configKeyValue.base : configKeyValue;
+      const classes = options?.classes ? toValue(options?.classes) : getBaseClasses(configKeyValue);
 
       vuelessAttrs.value = {
         ...commonAttrs,
-        class: cx([configKeyClass, toValue(cvaClasses), attrClass]),
+        class: cx([classes, attrClass]),
         ...((isObject && configAttrs) || {}),
       };
-    });
+    }
 
     return vuelessAttrs;
   }
@@ -261,6 +262,8 @@ function mergeConfigs({
   @returns {Object}
  */
 function stringToObject(value) {
+  if (value === undefined) value = "";
+
   return typeof value === "object" ? value : { base: value };
 }
 
@@ -359,13 +362,22 @@ function mergeClassesIntoConfig(config, topLevelClassKey, attrs) {
   return config;
 }
 
+/**
+ Return base classes.
+ @param { String | Object } value
+ @returns { String }
+ */
+function getBaseClasses(value) {
+  return typeof value === "object" ? value.base || "" : value || "";
+}
+
 /**
  Check is config key contains component name and if contains return it.
  @param { String | Object } value
  @returns { String }
  */
 function getNestedComponent(value) {
-  const classes = typeof value === "object" ? value.base || "" : value || "";
+  const classes = getBaseClasses(value);
   const match = classes.match(nestedComponentRegEx);
 
   return match ? match[1] : "";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.193",
+  "version": "0.0.194",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.button-toggle/index.vue

@@ -47,7 +47,7 @@ const props = defineProps({
    */
   modelValue: {
     type: [String, Number, Array],
-    default: () => (!this.multiple ? "" : []),
+    default: "",
   },
 
   /**

package/ui.form-select/composables/attrs.composable.js

@@ -21,20 +21,19 @@ export default function useAttrs(props, { isTop, isOpen, selectedLabel: selected
   for (const key in defaultConfig) {
     if (isSystemKey(key)) continue;
 
-    let classes = "";
-    let value = config.value[key];
+    const classes = computed(() => {
+      const value = config.value[key];
 
-    if (value.variants || value.compoundVariants) {
-      const getCVA = cva(value);
-
-      classes = computed(() =>
-        getCVA({
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
           ...props,
           error: Boolean(props.error),
           label: Boolean(props.label),
-        }),
-      );
-    }
+        });
+      }
+
+      return "";
+    });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.193",
+  "version": "0.0.194",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -7347,7 +7347,7 @@
                 "kind": "expression",
                 "type": "string|number|array"
               },
-              "default": "() => (!this.multiple ? \"\" : [])"
+              "default": "\"\""
             },
             {
               "name": "options",