vueless 0.0.201 → 0.0.203

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

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

package/ui.text-badge/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames } from "../service.storybook";
+import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
 
 import UBadge from "../ui.text-badge";
 import UIcon from "../ui.image-icon";
@@ -29,9 +29,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UBadge 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}
     </UBadge>
   `,
 });

package/ui.text-badge/index.vue

@@ -32,7 +32,7 @@ import { ref } from "vue";
 import UIService from "../service.ui";
 
 import { UBadge } from "./constants";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 import defaultConfig from "./configs/default.config";
 
 /* Should be a string for correct web-types gen */
@@ -101,7 +101,27 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["focus", "keydown", "blur", "click"]);
+const emit = defineEmits([
+  /**
+   * Triggers when the badge is focused.
+   */
+  "focus",
+
+  /**
+   * Triggers when the badge is pressed.
+   */
+  "keydown",
+
+  /**
+   * Triggers when the badge loses focus.
+   */
+  "blur",
+
+  /**
+   * Triggers when the badge is clicked.
+   */
+  "click",
+]);
 
 const { bodyAttrs, wrapperAttrs, hasSlotContent } = useAttrs(props);
 

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

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

package/ui.text-block/index.vue

@@ -11,7 +11,7 @@ import UIService from "../service.ui";
 
 import { UText } from "./constatns";
 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: "UText" });

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

@@ -4,40 +4,30 @@ import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
-export function useAttrs(props) {
-  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-  const { title, description } = config.value;
+export default function useAttrs(props) {
+  const { config, getAttrs, isSystemKey } = useUI(defaultConfig, () => props.config);
+  const attrs = {};
 
-  const cvaTitle = cva({
-    base: title.base,
-    variants: title.variants,
-    compoundVariants: title.compoundVariants,
-  });
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
 
-  const cvaDescription = cva({
-    base: description.base,
-    variants: description.variants,
-    compoundVariants: description.compoundVariants,
-  });
+    const classes = computed(() => {
+      const value = config.value[key];
 
-  const titleClasses = computed(() => cvaTitle({ size: props.size }));
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
+          ...props,
+        });
+      }
 
-  const descriptionClasses = computed(() => cvaDescription({ size: props.size }));
+      return "";
+    });
 
-  const wrapperAttrs = getAttrs("wrapper");
-  const headerAttrs = getAttrs("header");
-  const iconAttrs = getAttrs("icon", { isComponent: true });
-  const footerAttrs = getAttrs("footer");
-  const titleAttrs = getAttrs("title", { classes: titleClasses });
-  const descriptionAttrs = getAttrs("description", { classes: descriptionClasses });
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
+    ...attrs,
     config,
-    titleAttrs,
-    descriptionAttrs,
-    wrapperAttrs,
-    headerAttrs,
-    footerAttrs,
-    iconAttrs,
   };
 }

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

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   wrapper: "flex flex-col items-center justify-center size-full",
   header: "mb-4 flex justify-center",
-  icon: "",
+  icon: "{UIcon}",
   iconName: "emoji_food_beverage",
   footer: "mt-4 flex justify-center",
   title: {

package/ui.text-empty/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames } from "../service.storybook";
+import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
 
 import UEmpty from "../ui.text-empty";
 import UButton from "../ui.button";
@@ -30,9 +30,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UEmpty 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}
     </UEmpty>
   `,
 });

package/ui.text-empty/index.vue

@@ -39,7 +39,7 @@ import UIService from "../service.ui";
 
 import { UEmpty } 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: "UEmpty", inheritAttrs: false });

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-header/composables/attrs.composable.js

@@ -4,31 +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,
-        weight: props.weight,
-        underlined: props.underlined,
-        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.text-header/index.stories.js

@@ -105,7 +105,7 @@ Sizes.args = {};
 export const Underlined = SizesTemplate.bind({});
 Underlined.args = { underlined: true };
 
-export const Multiline = SizesTemplate.bind({});
+export const Multiline = DefaultTemplate.bind({});
 Multiline.args = {
   size: "2xl",
   multiline: true,

package/ui.text-header/index.vue

@@ -13,7 +13,7 @@ import UIService from "../service.ui";
 
 import { UHeader } 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: "UHeader", inheritAttrs: false });

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

@@ -5,64 +5,37 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export function useAttrs(props) {
-  const { config, hasSlotContent, getAttrs, getColor, setColor } = useUI(
+  const { config, hasSlotContent, getAttrs, getColor, setColor, isSystemKey } = useUI(
     defaultConfig,
     () => props.config,
   );
-  const { money, sum, penny } = config.value;
+  const attrs = {};
 
-  const cvaMoney = cva({
-    base: money.base,
-    variants: money.variants,
-    compoundVariants: money.compoundVariants,
-  });
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
 
-  const cvaSum = cva({
-    base: sum.base,
-    variants: sum.variants,
-    compoundVariants: sum.compoundVariants,
-  });
+    const classes = computed(() => {
+      const value = config.value[key];
 
-  const cvaPenny = cva({
-    base: penny.base,
-    variants: penny.variants,
-    compoundVariants: penny.compoundVariants,
-  });
+      if (value.variants || value.compoundVariants) {
+        return setColor(
+          cva(value)({
+            ...props,
+            color: getColor(props.color),
+          }),
+          props.color,
+        );
+      }
 
-  const moneyClasses = computed(() =>
-    setColor(
-      cvaMoney({
-        align: props.align,
-        color: getColor(props.color),
-        weight: props.weight,
-      }),
-      props.color,
-    ),
-  );
-
-  const sumClasses = computed(() =>
-    cvaSum({
-      planned: props.planned,
-      size: props.size,
-    }),
-  );
-
-  const pennyClasses = computed(() => cvaPenny({ size: props.size }));
+      return "";
+    });
 
-  const moneyAttrs = getAttrs("money", { classes: moneyClasses });
-  const slotLeftAttrs = getAttrs("slotLeft");
-  const slotRightAttrs = getAttrs("slotRight");
-  const sumAttrs = getAttrs("sum", { classes: sumClasses });
-  const pennyAttrs = getAttrs("penny", { classes: pennyClasses });
-  const symbolAttrs = getAttrs("symbol");
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
-    sumAttrs,
-    pennyAttrs,
-    moneyAttrs,
-    slotLeftAttrs,
-    symbolAttrs,
-    slotRightAttrs,
+    ...attrs,
+    config,
     hasSlotContent,
   };
 }

package/ui.text-money/index.stories.js

@@ -4,7 +4,7 @@ import URow from "../ui.container-row";
 import DebitIcon from "../ui.text-money/assets/debit.svg?component";
 import CreditIcon from "../ui.text-money/assets/credit.svg?component";
 
-import { getArgTypes, getSlotNames } from "../service.storybook";
+import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
 
 const COMPONENT_CLASSES = "flex justify-center w-1/6";
 
@@ -35,9 +35,7 @@ const DefaultTemplate = (args) => ({
   template: `
     <div class="${COMPONENT_CLASSES}">
       <UMoney v-bind="args">
-        <template v-for="(slot) in slots" v-slot:[slot]>
-          <template v-if="args[slot]">{{ args[slot] }}</template>
-        </template>
+        ${allSlotsFragment}
       </UMoney>
     </div>
   `,