vueless 0.0.209 → 0.0.210

package/package.json

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

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

@@ -4,49 +4,46 @@ import { cva, cx } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
-export function useAttrs(props) {
-  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
-  const { loader, ellipse } = config.value;
-
-  const cvaLoader = cva({
-    base: loader.base,
-    variants: loader.variants,
-    compoundVariants: loader.compoundVariants,
-  });
-
-  const cvaEllipse = cva({
-    base: ellipse.base,
-    variants: ellipse.variants,
-    compoundVariants: ellipse.compoundVariants,
-  });
-
-  const loaderClasses = computed(() =>
-    cvaLoader({
-      size: props.size,
-    }),
+export default function useAttrs(props) {
+  const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
   );
+  const attrs = {};
 
-  const ellipseClasses = computed(() =>
-    setColor(
-      cvaEllipse({
-        size: props.size,
-        color: getColor(props.color),
-      }),
-      props.color,
-    ),
-  );
+  for (const key in defaultConfig) {
+    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,
+        );
+      }
+
+      return "";
+    });
+
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
 
-  const loaderAttrs = getAttrs("loader", { classes: loaderClasses });
-  const ellipseRaw = getAttrs("ellipse", { classes: ellipseClasses });
+    if (key === "ellipse") {
+      const ellipseAttrs = attrs[`${key}Attrs`];
 
-  const ellipseAttrs = computed(() => (classes) => ({
-    ...ellipseRaw.value,
-    class: cx([ellipseRaw.value.class, classes]),
-  }));
+      attrs[`${key}Attrs`] = computed(() => (classes) => ({
+        ...ellipseAttrs,
+        class: cx([ellipseAttrs.value.class, classes]),
+      }));
+    }
+  }
 
   return {
-    loaderAttrs,
-    ellipseAttrs,
+    ...attrs,
     config,
   };
 }

package/ui.loader/index.vue

@@ -16,7 +16,7 @@ import UIService from "../service.ui";
 
 import { ULoader } from "./constants";
 import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "ULoader", inheritAttrs: false });

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

@@ -4,29 +4,37 @@ 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 { wrapper } = config.value;
-
-  const cvaWrapper = cva({
-    base: wrapper.base,
-    variants: wrapper.variants,
-    compoundVariants: wrapper.compoundVariants,
-  });
-
-  const wrapperClasses = computed(() =>
-    setColor(
-      cvaWrapper({
-        color: getColor(props.color),
-      }),
-      props.color,
-    ),
+export default function useAttrs(props) {
+  const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
   );
+  const attrs = {};
 
-  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses, isComponent: true });
+  for (const key in defaultConfig) {
+    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,
+        );
+      }
+
+      return "";
+    });
+
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
-    wrapperAttrs,
+    ...attrs,
     config,
   };
 }

package/ui.loader-rendering/configs/default.config.js

@@ -14,6 +14,7 @@ export default /*tw*/ {
       },
     },
   },
+  loader: "{ULoader}",
   transition: {
     enterFromClass: "scale-110 transform",
     leaveActiveClass: "scale-110 transform",

package/ui.loader-rendering/index.vue

@@ -1,7 +1,12 @@
 <template>
   <Transition v-bind="config.transition">
     <div v-if="showLoader" v-bind="wrapperAttrs">
-      <ULoader :loading="showLoader" size="lg" :color="color === 'white' ? 'grayscale' : 'white'" />
+      <ULoader
+        :loading="showLoader"
+        size="lg"
+        :color="color === 'white' ? 'grayscale' : 'white'"
+        v-bind="loaderAttrs"
+      />
     </div>
   </Transition>
 </template>
@@ -14,7 +19,7 @@ import ULoader from "../ui.loader";
 
 import { ULoaderRendering } from "./constants";
 import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 import { useLoaderRendering } from "./composables/useLoaderRendering";
 
 /* Should be a string for correct web-types gen */
@@ -39,7 +44,7 @@ const props = defineProps({
   },
 });
 
-const { wrapperAttrs, config } = useAttrs(props);
+const { wrapperAttrs, loaderAttrs, config } = useAttrs(props);
 const { isLoading, loaderRenderingOn, loaderRenderingOff } = useLoaderRendering();
 
 onMounted(() => {

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

@@ -4,28 +4,37 @@ import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
-export function useAttrs(props) {
-  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
-  const { progress } = config.value;
-
-  const cvaProgress = cva({
-    base: progress.base,
-    variants: progress.variants,
-    compoundVariants: progress.compoundVariants,
-  });
-
-  const progressClasses = computed(() =>
-    setColor(
-      cvaProgress({
-        color: getColor(props.color),
-      }),
-      props.color,
-    ),
+export default function useAttrs(props) {
+  const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
   );
+  const attrs = {};
 
-  const progressAttrs = getAttrs("progress", { classes: progressClasses.value });
+  for (const key in defaultConfig) {
+    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,
+        );
+      }
+
+      return "";
+    });
+
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
-    progressAttrs,
+    ...attrs,
+    config,
   };
 }

package/ui.loader-top/index.vue

@@ -13,7 +13,7 @@ import { useLoaderTop } from "./composables/useLoaderTop";
 
 import { ULoaderTop, MAXIMUM, SPEED } from "./constants";
 import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "ULoaderTop", inheritAttrs: false });

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

@@ -4,29 +4,37 @@ import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
-export function useAttrs(props) {
-  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
-  const { wrapper } = config.value;
-
-  const cvaWrapper = cva({
-    base: wrapper.base,
-    variants: wrapper.variants,
-    compoundVariants: wrapper.compoundVariants,
-  });
-
-  const wrapperClasses = computed(() =>
-    setColor(
-      cvaWrapper({
-        size: props.size,
-        color: getColor(props.color),
-      }),
-      props.color,
-    ),
+export default function useAttrs(props) {
+  const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
   );
+  const attrs = {};
 
-  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
+  for (const key in defaultConfig) {
+    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,
+        );
+      }
+
+      return "";
+    });
+
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
-    wrapperAttrs,
+    ...attrs,
+    config,
   };
 }

package/ui.other-dot/index.vue

@@ -7,7 +7,7 @@ import UIService from "../service.ui";
 
 import { UDot } from "./constants";
 import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UDot", inheritAttrs: false });

package/web-types.json

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