vueless 0.0.209 → 0.0.211

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

@@ -4,45 +4,42 @@ import { cva, cx } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
-export function useAttrs(props) {
+export default function useAttrs(props) {
   const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
     defaultConfig,
     () => props.config,
   );
+
   const attrs = {};
 
   for (const key in defaultConfig) {
     if (isSystemKey(key)) continue;
 
-    let classes = "";
-    let value = config.value[key];
-
-    const isVariants = value.variants || value.compoundVariants;
-    const excludeKeys = ["progress", "indicator", "step"];
+    const classes = computed(() => {
+      const value = config.value[key];
 
-    if (isVariants && !excludeKeys.includes(key)) {
-      const getCVA = cva(value);
+      if (value.variants || value.compoundVariants) {
+        return setColor(
+          cva(value)({
+            ...props,
+            color: getColor(props.color),
+          }),
+          props.color,
+        );
+      }
 
-      classes = computed(() => getCVA({ ...props }));
-    }
+      return "";
+    });
 
-    if (isVariants && excludeKeys.includes(key)) {
-      const getCVA = cva(value);
-
-      classes = computed(() =>
-        setColor(getCVA({ ...props, color: getColor(props.color) }), props.color),
-      );
-    }
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
 
     if (key === "step") {
-      const stepAttrsRaw = getAttrs("step", { classes });
+      const stepAttrs = attrs[`${key}Attrs`];
 
       attrs[`${key}Attrs`] = computed(() => (classes) => ({
-        ...stepAttrsRaw.value,
-        class: cx([stepAttrsRaw.value.class, classes]),
+        ...stepAttrs,
+        class: cx([stepAttrs.value.class, classes]),
       }));
-    } else {
-      attrs[`${key}Attrs`] = getAttrs(key, { classes });
     }
   }
 

package/ui.navigation-progress/index.vue

@@ -2,6 +2,12 @@
   <div v-bind="wrapperAttrs">
     <template v-if="isVariant.progress">
       <div v-if="indicator" v-bind="indicatorAttrs" :style="{ width: progressPercent }">
+        <!--
+          @slot Use it to add something instead of the progress indicator.
+          @binding {number} percent
+          @binding {number} value
+          @binding {number} max
+        -->
         <slot name="indicator" :percent="progressPercent" :value="value" :max="realMax">
           {{ progressPercent }}
         </slot>
@@ -12,6 +18,13 @@
 
     <div v-if="isSteps" v-bind="stepAttrs(!value && config.firstStep)">
       <template v-for="(step, index) in max" :key="index">
+        <!--
+          @slot Use it to add something instead of the progress step label.
+          @binding {string} name
+          @binding {number} step
+          @binding {number} value
+          @binding {number} max
+        -->
         <slot
           v-if="isActiveStep(index)"
           :name="`step-${index}`"
@@ -40,7 +53,7 @@
 import { computed } from "vue";
 
 import UIService from "../service.ui";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 
 import defaultConfig from "./configs/default.config";
 import { UProgress, VARIANT } from "./constants";

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

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

package/ui.navigation-tab/index.vue

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

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

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

package/ui.navigation-tabs/configs/default.config.js

@@ -7,7 +7,7 @@ export default /*tw*/ {
       },
     },
   },
-  tab: "",
+  tab: "{UTab}",
   defaultVariants: {
     size: "md",
     underlined: false,

package/ui.navigation-tabs/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div :data-cy="dataCy" v-bind="wrapperAttrs">
+    <!-- @slot Use it to add the UTab component. -->
     <slot>
       <UTab
         v-for="(item, index) in options"
@@ -23,7 +24,7 @@ import UIService from "../service.ui";
 
 import { UTabs } 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: "UTabs", inheritAttrs: false });
@@ -85,7 +86,13 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits([
+  /**
+   * Triggers when the selected tab changes.
+   * @property {string} modelValue
+   */
+  "update:modelValue",
+]);
 
 const selectedItem = computed({
   get: () => props.modelValue,

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/ui.text-file/configs/default.config.js

@@ -17,4 +17,7 @@ export default /*tw*/ {
       },
     },
   },
+  defaultVariants: {
+    size: "md",
+  },
 };

package/ui.text-file/index.vue

@@ -2,22 +2,25 @@
   <ULink :url="url" no-ring target-blank :data-cy="dataCy" v-bind="fileAttrs">
     <slot name="left" :file="{ id, label, url, imageUrl }" />
 
-    <div v-bind="infoAttrs">
-      <img v-if="imageUrl" :src="imageUrl" v-bind="imageAttrs" />
-
-      <UIcon
-        v-else
-        internal
-        interactive
-        color="gray"
-        :name="config.iconName"
-        v-bind="iconAttrs"
-        @focus="onFocus"
-        @blur="onBlur"
-      />
-
-      <span v-bind="labelAttrs" v-text="label" />
-    </div>
+    <slot :file="{ id, label, url, imageUrl, iconName: config.iconName }">
+      <div v-bind="infoAttrs">
+        <img v-if="imageUrl" :src="imageUrl" v-bind="imageAttrs" />
+
+        <UIcon
+          v-else
+          internal
+          interactive
+          color="gray"
+          :size="size"
+          :name="config.iconName"
+          v-bind="iconAttrs"
+          @focus="onFocus"
+          @blur="onBlur"
+        />
+
+        <span v-bind="labelAttrs" v-text="label" />
+      </div>
+    </slot>
 
     <slot name="right" :file="{ id, label, url, imageUrl }" />
   </ULink>
@@ -40,7 +43,7 @@ defineOptions({ name: "UFile", inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Set url link for the file.
+   * File url.
    */
   url: {
     type: String,
@@ -48,7 +51,7 @@ const props = defineProps({
   },
 
   /**
-   * Set image url.
+   * Image url.
    */
   imageUrl: {
     type: String,
@@ -56,13 +59,22 @@ const props = defineProps({
   },
 
   /**
-   * Set label.
+   * File label.
    */
   label: {
     type: String,
     default: "",
   },
 
+  /**
+   * File size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UFile).default.size,
+  },
+
   /**
    * Generates unique element id.
    * @ignore
@@ -73,16 +85,15 @@ const props = defineProps({
   },
 
   /**
-   * Set size.
-   * @values sm, md, lg
+   * Component ui config object.
    */
-  size: {
-    type: String,
-    default: UIService.get(defaultConfig, UFile).default.size,
+  config: {
+    type: Object,
+    default: () => ({}),
   },
 
   /**
-   * Sets data-cy attribute for automated testing.
+   * Data-cy attribute for automated testing.
    */
   dataCy: {
     type: String,

package/ui.text-files/index.vue

@@ -88,6 +88,14 @@ const props = defineProps({
     default: UIService.get(defaultConfig, UFiles).default.size,
   },
 
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
   /**
    * Sets data-cy attribute for automated testing.
    */

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

@@ -42,6 +42,7 @@ export default /*tw*/ {
     color: "grayscale",
     weight: "medium",
     size: "md",
+    tag: "div",
     multiline: false,
     underlined: false,
   },

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

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames } from "../service.storybook";
+import { allSlotsFragment, getArgTypes, getSlotNames } from "../service.storybook";
 
 import UHeader from "../ui.text-header";
 import UGroup from "../ui.container-group";
@@ -26,7 +26,7 @@ const DefaultTemplate = (args) => ({
     return { args, slots };
   },
   template: `
-    <UHeader v-bind="args" />
+    <UHeader v-bind="args">${allSlotsFragment}</UHeader>
   `,
 });
 

package/ui.text-header/index.vue

@@ -1,11 +1,7 @@
 <template>
-  <div :data-cy="dataCy" v-bind="wrapperAttrs">
-    <template v-if="label">
-      {{ label }}
-    </template>
-
-    <slot />
-  </div>
+  <component :is="tag" v-bind="wrapperAttrs" :data-cy="dataCy">
+    <slot>{{ label }}</slot>
+  </component>
 </template>
 
 <script setup>
@@ -20,7 +16,7 @@ defineOptions({ name: "UHeader", inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Set label.
+   * Header label.
    */
   label: {
     type: String,
@@ -28,7 +24,7 @@ const props = defineProps({
   },
 
   /**
-   * Set size.
+   * Header size.
    * @values xs, sm, md, lg, xl, 2xl
    */
   size: {
@@ -37,7 +33,7 @@ const props = defineProps({
   },
 
   /**
-   * Set weight.
+   * Header weight.
    * @values regular, medium, bold
    */
   weight: {
@@ -54,6 +50,14 @@ const props = defineProps({
     default: UIService.get(defaultConfig, UHeader).default.color,
   },
 
+  /**
+   * Allows changing button html tag.
+   */
+  tag: {
+    type: String,
+    default: UIService.get(defaultConfig, UHeader).default.tag,
+  },
+
   /**
    * Return default line height to the component (it may be useful for multiline headers).
    */
@@ -71,7 +75,7 @@ const props = defineProps({
   },
 
   /**
-   * Sets component ui config object.
+   * Component ui config object.
    */
   config: {
     type: Object,
@@ -79,7 +83,7 @@ const props = defineProps({
   },
 
   /**
-   * Sets data-cy attribute for automated testing.
+   * Data-cy attribute for automated testing.
    */
   dataCy: {
     type: String,