vueless 0.0.202 → 0.0.203

package/package.json

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

package/ui.text-file/composables/attrs.composable.js

@@ -4,35 +4,31 @@ import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 
-export function useAttrs(props, { focus }) {
-  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-  const { label } = config.value;
-
-  const cvaLabel = cva({
-    base: label.base,
-    variants: label.variants,
-    compoundVariants: label.compoundVariants,
-  });
-
-  const labelClasses = computed(() =>
-    cvaLabel({
-      focus: Boolean(focus.value),
-      size: props.size,
-    }),
-  );
-
-  const labelAttrs = getAttrs("label", { classes: labelClasses });
-  const fileAttrs = getAttrs("file", { isComponent: true });
-  const infoAttrs = getAttrs("info");
-  const iconAttrs = getAttrs("icon", { isComponent: true });
-  const imageAttrs = getAttrs("image");
+export default function useAttrs(props, { focus }) {
+  const { config, getAttrs, isSystemKey } = useUI(defaultConfig, () => props.config);
+  const attrs = {};
+
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
+
+    const classes = computed(() => {
+      const value = config.value[key];
+
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
+          ...props,
+          focus: Boolean(focus.value),
+        });
+      }
+
+      return "";
+    });
+
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
+    ...attrs,
     config,
-    fileAttrs,
-    infoAttrs,
-    iconAttrs,
-    labelAttrs,
-    imageAttrs,
   };
 }

package/ui.text-file/configs/default.config.js

@@ -1,7 +1,7 @@
 export default /*tw*/ {
-  file: "",
+  file: "{UFile}",
   info: "flex items-center gap-2 ",
-  icon: "",
+  icon: "{UIcon}",
   iconName: "description",
   image: "rounded-sm max-w-7",
   label: {

package/ui.text-file/index.vue

@@ -31,7 +31,7 @@ import UIcon from "../ui.image-icon";
 
 import UIService, { getRandomId } from "../service.ui";
 
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 import { UFile } from "./constants";
 import defaultConfig from "./configs/default.config";
 

package/ui.text-files/composables/attrs.composable.js

@@ -4,25 +4,31 @@ import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 
-export function useAttrs(props) {
-  const { getAttrs, config } = useUI(defaultConfig, () => props.config);
-  const { body } = config.value;
+export default function useAttrs(props) {
+  const { getAttrs, config, isSystemKey } = useUI(defaultConfig, () => props.config);
+  const attrs = {};
 
-  const cvaBody = cva({
-    base: body.base,
-    variants: body.variants,
-    compoundVariants: body.compoundVariants,
-  });
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
 
-  const bodyClasses = computed(() => cvaBody({ label: Boolean(props.label) }));
+    const classes = computed(() => {
+      const value = config.value[key];
 
-  const labelAttrs = getAttrs("label");
-  const bodyAttrs = getAttrs("body", { classes: bodyClasses });
-  const fileAttrs = getAttrs("file", { isComponent: true });
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
+          ...props,
+          label: Boolean(props.label),
+        });
+      }
+
+      return "";
+    });
+
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
-    labelAttrs,
-    bodyAttrs,
-    fileAttrs,
+    ...attrs,
+    config,
   };
 }

package/ui.text-files/configs/default.config.js

@@ -8,7 +8,7 @@ export default /*tw*/ {
       },
     },
   },
-  file: "block",
+  file: "{UFile} block",
   defaultVariants: {
     placement: "topInside",
     size: "md",

package/ui.text-files/index.vue

@@ -14,12 +14,16 @@
           :data-cy="`${dataCy}-item`"
         >
           <template #left="{ file: currentFile }">
-            <!-- @slot Use it to add something left. -->
+            <!-- @slot Use it to add something left.
+              @binding {object} file
+            -->
             <slot name="left" :file="currentFile" />
           </template>
 
           <template #right="{ file: currentFile }">
-            <!-- @slot Use it to add something right. -->
+            <!-- @slot Use it to add something right.
+              @binding {object} file
+            -->
             <slot name="right" :file="currentFile" />
           </template>
         </UFile>
@@ -35,7 +39,7 @@ import UIService from "../service.ui";
 
 import { UFiles } from "./constants";
 import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 import { computed } from "vue";
 
 /* Should be a string for correct web-types gen */

package/ui.text-notify/composables/attrs.composable.js

@@ -1,30 +1,32 @@
 import useUI from "../../composable.ui";
-
+import { computed } from "vue";
 import defaultConfig from "../configs/default.config";
+import { cva } from "../../service.ui";
+
+export default function useAttrs(props) {
+  const { config, getAttrs, isSystemKey } = useUI(defaultConfig, () => props.config);
+  const attrs = {};
+
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
+
+    const classes = computed(() => {
+      const value = config.value[key];
+
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
+          ...props,
+        });
+      }
 
-export function useAttrs(props) {
-  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+      return "";
+    });
 
-  const wrapperAttrs = getAttrs("wrapper");
-  const bodyAttrs = getAttrs("body");
-  const contentAttrs = getAttrs("content");
-  const labelAttrs = getAttrs("label");
-  const descriptionAttrs = getAttrs("description");
-  const successIconAttrs = getAttrs("successIcon");
-  const warningIconAttrs = getAttrs("warningIcon");
-  const errorIconAttrs = getAttrs("errorIcon");
-  const closeIconAttrs = getAttrs("closeIcon");
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
+    ...attrs,
     config,
-    wrapperAttrs,
-    bodyAttrs,
-    contentAttrs,
-    labelAttrs,
-    descriptionAttrs,
-    successIconAttrs,
-    warningIconAttrs,
-    errorIconAttrs,
-    closeIconAttrs,
   };
 }

package/ui.text-notify/index.vue

@@ -83,7 +83,7 @@ import { merge } from "lodash-es";
 import UIService, { globalComponentConfig, cx } from "../service.ui";
 
 import { useLocale } from "../composable.locale";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 
 import defaultConfig from "./configs/default.config";
 import { UNotify, NOTIFY_TYPE, POSITION } from "./constants";

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.202",
+  "version": "0.0.203",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -3331,6 +3331,7 @@
               "description": "Use it to add something left.",
               "bindings": [
                 {
+                  "type": "object",
                   "name": "file"
                 }
               ]
@@ -3341,6 +3342,7 @@
               "description": "Use it to add something right.",
               "bindings": [
                 {
+                  "type": "object",
                   "name": "file"
                 }
               ]