vueless 0.0.197 → 0.0.199

package/composable.ui/index.js

@@ -46,7 +46,8 @@ const SYSTEM_CONFIG_KEY = {
   4. Component classes (class="...")
  */
 export default function useUI(defaultConfig = {}, propsConfigGetter = null, topLevelClassKey) {
-  const { name: componentName } = getCurrentInstance().type;
+  const { type, props } = getCurrentInstance();
+  const componentName = type.name;
   const globalConfig = globalComponentConfig[componentName];
 
   const isStrategyValid = strategy && Object.values(STRATEGY_TYPE).includes(strategy);
@@ -88,6 +89,7 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
     delete commonAttrs.value;
 
     watch(config, updateVuelessAttrs, { immediate: true });
+    watch(props, updateVuelessAttrs);
 
     function updateVuelessAttrs() {
       const configKeyValue = config.value[configKey];
@@ -100,7 +102,7 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
 
       const isTopLevelClassKey = configKey === (topLevelClassKey || firstClassKey);
       const attrClass = isTopLevelClassKey && !nestedComponent ? attrs.class : "";
-      const classes = options?.classes ? toValue(options?.classes) : getBaseClasses(configKeyValue);
+      const classes = toValue(options?.classes) || getBaseClasses(configKeyValue);
 
       vuelessAttrs.value = {
         ...commonAttrs,
@@ -397,7 +399,13 @@ function getNestedComponent(value) {
  @returns { Boolean }
  */
 function isSystemKey(key) {
-  return Object.values(SYSTEM_CONFIG_KEY).some((value) => value.includes(key));
+  const isExactKey = Object.values(SYSTEM_CONFIG_KEY).some((value) => value === key);
+
+  return (
+    isExactKey ||
+    key.includes(SYSTEM_CONFIG_KEY.iconName) ||
+    key.includes(SYSTEM_CONFIG_KEY.iconNameCapitalize)
+  );
 }
 
 /**

package/package.json

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

package/service.ui/index.js

@@ -226,7 +226,6 @@ export const {
   setFavicon,
   setBrandColor,
   convertHexInRgb,
-  isSystemKey,
   isMac,
   isPWA,
   isIOS,

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

@@ -1,58 +1,40 @@
 import { computed } from "vue";
 import useUI from "../../composable.ui";
 import { cva } from "../../service.ui";
-
 import defaultConfig from "../configs/default.config";
 
-export function useAttrs(props) {
-  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
-  const { button, text } = config.value;
+export default function useAttrs(props) {
+  const { config, getAttrs, hasSlotContent, isSystemKey, getColor, setColor } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
+  const attrs = {};
 
-  const cvaButton = cva({
-    base: button.base,
-    variants: button.variants,
-    compoundVariants: button.compoundVariants,
-  });
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
 
-  const cvaText = cva({
-    base: text.base,
-    variants: text.variants,
-    compoundVariants: text.compoundVariants,
-  });
+    const classes = computed(() => {
+      const value = config.value[key];
 
-  const buttonClasses = computed(() =>
-    setColor(
-      cvaButton({
-        size: props.size,
-        color: getColor(props.color),
-        variant: props.variant,
-        pill: props.pill,
-        block: props.block,
-        square: props.loading || props.square,
-        filled: props.filled,
-        loading: props.loading,
-        disabled: props.disabled,
-      }),
-      props.color,
-    ),
-  );
+      if (value.variants || value.compoundVariants) {
+        return setColor(
+          cva(value)({
+            ...props,
+            color: getColor(props.color),
+          }),
+          props.color,
+        );
+      }
 
-  const textClasses = computed(() =>
-    setColor(
-      cvaText({
-        color: getColor(props.color),
-      }),
-      props.color,
-    ),
-  );
+      return "";
+    });
 
-  const buttonAttrs = getAttrs("button", { classes: buttonClasses });
-  const loaderAttrs = getAttrs("loader");
-  const textAttrs = getAttrs("text", { classes: textClasses });
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
-    buttonAttrs,
-    loaderAttrs,
-    textAttrs,
+    ...attrs,
+    config,
+    hasSlotContent,
   };
 }

package/ui.button/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames } from "../service.storybook";
+import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
 
 import UButton from "../ui.button";
 import UIcon from "../ui.image-icon";
@@ -29,9 +29,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UButton v-bind="args">
-      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-        <template v-if="args[slot]">{{ args[slot] }}</template>
-      </template>
+      ${allSlotsFragment}
     </UButton>
   `,
 });

package/ui.button/index.vue

@@ -39,7 +39,7 @@ import ULoader from "../ui.loader";
 import UIcon from "../ui.image-icon";
 
 import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 import { UButton } from "./constants";
 
 /* Should be a string for correct web-types gen */

package/web-types.json

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