vueless 0.0.265 → 0.0.266

package/composable.ui/index.js

@@ -198,7 +198,6 @@ function mergeConfigs({
     safelistColors,
     defaultVariants,
     compoundVariants,
-    iconNameCapitalize,
     iconName,
   } = SYSTEM_CONFIG_KEY;
 
@@ -235,7 +234,7 @@ function mergeConfigs({
 
         const isObject = isObjectComposedConfig || isObjectGlobalConfig || isObjectPropsConfig;
         const isEmpty = composedConfig[key] === null;
-        const isIconName = key.includes(iconName) || key.includes(iconNameCapitalize);
+        const isIconName = key.toLowerCase().includes(iconName.toLowerCase());
         const isI18n = key === i18n;
 
         if (key === "variants" && !isVariants) {
@@ -403,8 +402,8 @@ function isSystemKey(key) {
 
   return (
     isExactKey ||
-    key.includes(SYSTEM_CONFIG_KEY.iconName) ||
-    key.includes(SYSTEM_CONFIG_KEY.iconNameCapitalize)
+    key.toLowerCase().includes(SYSTEM_CONFIG_KEY.iconName.toLowerCase()) ||
+    key.toLowerCase().includes(SYSTEM_CONFIG_KEY.transition.toLowerCase())
   );
 }
 

package/constants/index.js

@@ -60,7 +60,7 @@ export const SYSTEM_CONFIG_KEY = {
   safelist: "safelist",
   component: "component",
   safelistColors: "safelistColors",
-  iconNameCapitalize: "IconName",
+  transition: "transition",
   iconName: "iconName",
   ...CVA_CONFIG_KEY,
 };

package/package.json

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

package/service.ui/index.js

@@ -228,6 +228,10 @@ export default class UIService {
    @returns { String }
    */
   setColor(classes, color) {
+    if (typeof classes !== "string") {
+      return "";
+    }
+
     return classes?.replaceAll("{color}", color);
   }
 

package/ui.data-list/composables/attrs.composable.js

@@ -4,7 +4,7 @@ import { computed } from "vue";
 import { cva, cx } from "../../service.ui";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
+  const { config, getAttrs, hasSlotContent, isSystemKey, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -14,15 +14,15 @@ export default function useAttrs(props) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
+      let value = config.value[key];
 
-      if (value.variants || value.compoundVariants) {
-        return cva(value)({
+      if (isCVA(value)) {
+        value = cva(value)({
           ...props,
         });
       }
 
-      return "";
+      return value;
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });

package/ui.data-table/composables/attrs.composable.js

@@ -7,7 +7,7 @@ export default function useAttrs(
   props,
   { tableRows, isShownActionsHeader, isHeaderSticky, isFooterSticky },
 ) {
-  const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
+  const { config, getAttrs, hasSlotContent, isSystemKey, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -31,16 +31,16 @@ export default function useAttrs(
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
+      let value = config.value[key];
 
-      if (value.variants || value.compoundVariants) {
-        return cva(value)({
+      if (isCVA(value)) {
+        value = cva(value)({
           ...props,
           compact: Boolean(props.compact),
         });
       }
 
-      return "";
+      return value;
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });

package/ui.image-avatar/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
+  const { config, getAttrs, getColor, setColor, isSystemKey, hasSlotContent, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -15,19 +15,16 @@ export default function useAttrs(props) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
-
-      if (value.variants || value.compoundVariants) {
-        return setColor(
-          cva(value)({
-            ...props,
-            color: getColor(props.color),
-          }),
-          props.color,
-        );
+      let value = config.value[key];
+
+      if (isCVA(value)) {
+        value = cva(value)({
+          ...props,
+          color: getColor(props.color),
+        });
       }
 
-      return "";
+      return setColor(value, props.color);
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
@@ -36,5 +33,6 @@ export default function useAttrs(props) {
   return {
     ...attrs,
     config,
+    hasSlotContent,
   };
 }

package/ui.image-icon/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
+  const { config, getAttrs, getColor, setColor, isSystemKey, hasSlotContent, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -15,19 +15,16 @@ export default function useAttrs(props) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
-
-      if (value.variants || value.compoundVariants) {
-        return setColor(
-          cva(value)({
-            ...props,
-            color: getColor(props.color),
-          }),
-          props.color,
-        );
+      let value = config.value[key];
+
+      if (isCVA(value)) {
+        value = cva(value)({
+          ...props,
+          color: getColor(props.color),
+        });
       }
 
-      return "";
+      return setColor(value, props.color);
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
@@ -36,5 +33,6 @@ export default function useAttrs(props) {
   return {
     ...attrs,
     config,
+    hasSlotContent,
   };
 }

package/ui.loader/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
+  const { config, getAttrs, getColor, setColor, isSystemKey, hasSlotContent, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -15,19 +15,16 @@ export default function useAttrs(props) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
-
-      if (value.variants || value.compoundVariants) {
-        return setColor(
-          cva(value)({
-            ...props,
-            color: getColor(props.color),
-          }),
-          props.color,
-        );
+      let value = config.value[key];
+
+      if (isCVA(value)) {
+        value = cva(value)({
+          ...props,
+          color: getColor(props.color),
+        });
       }
 
-      return "";
+      return setColor(value, props.color);
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
@@ -45,5 +42,6 @@ export default function useAttrs(props) {
   return {
     ...attrs,
     config,
+    hasSlotContent,
   };
 }

package/ui.loader-rendering/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
+  const { config, getAttrs, getColor, setColor, isSystemKey, hasSlotContent, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -15,19 +15,16 @@ export default function useAttrs(props) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
-
-      if (value.variants || value.compoundVariants) {
-        return setColor(
-          cva(value)({
-            ...props,
-            color: getColor(props.color),
-          }),
-          props.color,
-        );
+      let value = config.value[key];
+
+      if (isCVA(value)) {
+        value = cva(value)({
+          ...props,
+          color: getColor(props.color),
+        });
       }
 
-      return "";
+      return setColor(value, props.color);
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
@@ -36,5 +33,6 @@ export default function useAttrs(props) {
   return {
     ...attrs,
     config,
+    hasSlotContent,
   };
 }

package/ui.loader-top/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
+  const { config, getAttrs, getColor, setColor, isSystemKey, hasSlotContent, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -15,19 +15,16 @@ export default function useAttrs(props) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
-
-      if (value.variants || value.compoundVariants) {
-        return setColor(
-          cva(value)({
-            ...props,
-            color: getColor(props.color),
-          }),
-          props.color,
-        );
+      let value = config.value[key];
+
+      if (isCVA(value)) {
+        value = cva(value)({
+          ...props,
+          color: getColor(props.color),
+        });
       }
 
-      return "";
+      return setColor(value, props.color);
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
@@ -36,5 +33,6 @@ export default function useAttrs(props) {
   return {
     ...attrs,
     config,
+    hasSlotContent,
   };
 }

package/ui.navigation-pagination/composables/attrs.composable.js

@@ -5,22 +5,25 @@ import { cva, cx } from "../../service.ui";
 import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, isSystemKey } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, isSystemKey, hasSlotContent, isCVA } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
   const attrs = {};
 
   for (const key in defaultConfig) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
+      let value = config.value[key];
 
-      if (value.variants || value.compoundVariants) {
-        return cva(value)({
+      if (isCVA(value)) {
+        value = cva(value)({
           ...props,
         });
       }
 
-      return "";
+      return value;
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
@@ -51,5 +54,6 @@ export default function useAttrs(props) {
   return {
     ...attrs,
     config,
+    hasSlotContent,
   };
 }

package/ui.navigation-progress/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
+  const { config, getAttrs, getColor, setColor, isSystemKey, hasSlotContent, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -16,19 +16,16 @@ export default function useAttrs(props) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
-
-      if (value.variants || value.compoundVariants) {
-        return setColor(
-          cva(value)({
-            ...props,
-            color: getColor(props.color),
-          }),
-          props.color,
-        );
+      let value = config.value[key];
+
+      if (isCVA(value)) {
+        value = cva(value)({
+          ...props,
+          color: getColor(props.color),
+        });
       }
 
-      return "";
+      return setColor(value, props.color);
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
@@ -46,5 +43,6 @@ export default function useAttrs(props) {
   return {
     ...attrs,
     config,
+    hasSlotContent,
   };
 }

package/ui.navigation-progress/index.stories.js

@@ -51,19 +51,16 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
     return { args, updateProgress, options: argTypes[args.enum].options };
   },
   template: `
-    <UCol align="start">
-      <UCol>
-        <UProgress
-          v-for="(option, index) in options"
-          :key="index"
-          v-bind="args"
-          :[args.enum]="option"
-          :value="args.progress"
-        />
-      </UCol>
-
-      <UButton label="Next →" size="sm" variant="thirdary" filled @click="updateProgress" />
-      </UCol>
+    <UCol>
+      <UProgress
+        v-for="(option, index) in options"
+        :key="index"
+        v-bind="args"
+        :[args.enum]="option"
+        :value="args.progress"
+      />
+    <UButton label="Next →" size="sm" variant="thirdary" filled @click="updateProgress" />
+    </UCol>
   `,
 });
 

package/ui.navigation-progress/index.vue

@@ -164,6 +164,6 @@ const progressPercent = computed(() => {
 });
 
 function isActiveStep(index) {
-  return index === props.value;
+  return index === props.value - 1;
 }
 </script>

package/ui.navigation-tab/composables/attrs.composable.js

@@ -5,24 +5,27 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export default function useAttrs(props, { selected, size }) {
-  const { config, getAttrs, isSystemKey } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, isSystemKey, hasSlotContent, isCVA } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
   const attrs = {};
 
   for (const key in defaultConfig) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
+      let value = config.value[key];
 
-      if (value.variants || value.compoundVariants) {
-        return cva(value)({
+      if (isCVA(value)) {
+        value = cva(value)({
           ...props,
           size: size.value,
           selected: selected.value,
         });
       }
 
-      return "";
+      return value;
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
@@ -31,5 +34,6 @@ export default function useAttrs(props, { selected, size }) {
   return {
     ...attrs,
     config,
+    hasSlotContent,
   };
 }

package/ui.navigation-tabs/composables/attrs.composable.js

@@ -5,22 +5,25 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, isSystemKey } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, isSystemKey, hasSlotContent, isCVA } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
   const attrs = {};
 
   for (const key in defaultConfig) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
+      let value = config.value[key];
 
-      if (value.variants || value.compoundVariants) {
-        return cva(value)({
+      if (isCVA(value)) {
+        value = cva(value)({
           ...props,
         });
       }
 
-      return "";
+      return value;
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
@@ -29,5 +32,6 @@ export default function useAttrs(props) {
   return {
     ...attrs,
     config,
+    hasSlotContent,
   };
 }

package/ui.other-dot/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
+  const { config, getAttrs, getColor, setColor, isSystemKey, hasSlotContent, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -15,19 +15,16 @@ export default function useAttrs(props) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
-
-      if (value.variants || value.compoundVariants) {
-        return setColor(
-          cva(value)({
-            ...props,
-            color: getColor(props.color),
-          }),
-          props.color,
-        );
+      let value = config.value[key];
+
+      if (isCVA(value)) {
+        value = cva(value)({
+          ...props,
+          color: getColor(props.color),
+        });
       }
 
-      return "";
+      return setColor(value, props.color);
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
@@ -36,5 +33,6 @@ export default function useAttrs(props) {
   return {
     ...attrs,
     config,
+    hasSlotContent,
   };
 }

package/ui.other-dot/index.stories.js

@@ -42,7 +42,7 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   template: `
     <UCol>
       <URow
-        v-for="(color, index) in colors"
+        v-for="(option, index) in options"
         :key="index"
         gap="none"
         align="center"

package/web-types.json

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