vueless 0.0.206 → 0.0.208

package/ui.container-modal/composables/attrs.composable.js

@@ -6,82 +6,59 @@ import { computed } from "vue";
 
 import useBreakpoint from "../../composable.breakpoint";
 
-export function useAttrs(props) {
-  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config, "wrapper");
-  const { modal } = config.value;
+export default function useAttrs(props) {
+  const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
   const { isMobileBreakpoint } = useBreakpoint();
+  const attrs = {};
 
-  const cvaModal = cva({
-    base: modal.base,
-    variants: modal.variants,
-    compoundVariants: modal.compoundVariants,
-  });
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
 
-  const modalClasses = computed(() =>
-    cvaModal({
-      width: props.width,
-      inner: props.inner,
-    }),
-  );
+    const classes = computed(() => {
+      const value = config.value[key];
+
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
+          ...props,
+        });
+      }
+
+      return "";
+    });
+
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
 
-  const wrapperAttrs = getAttrs("wrapper");
-  const overlayAttrs = getAttrs("overlay");
-  const innerWrapperAttrs = getAttrs("innerWrapper");
-  const headerAttrsRaw = getAttrs("header");
-  const headerLeftAttrs = getAttrs("headerLeft");
-  const headerLeftFallbackAttrs = getAttrs("headerLeftFallback");
-  const backLinkAttrs = getAttrs("backLink", { isComponent: true });
-  const backLinkIconAttrs = getAttrs("backLinkIcon", { isComponent: true });
-  const titleAttrs = getAttrs("title", { isComponent: true });
-  const descriptionAttrs = getAttrs("description");
-  const headerRightAttrs = getAttrs("headerRight");
-  const closeIconAttrs = getAttrs("closeIcon", { isComponent: true });
-  const bodyAttrs = getAttrs("body");
-  const dividerAttrs = getAttrs("divider", { isComponent: true });
-  const dividerSpacingAttrs = getAttrs("dividerSpacing", { isComponent: true });
-  const footerAttrsRaw = getAttrs("footer");
+    if (key === "header") {
+      const headerAttrs = attrs[`${key}Attrs`];
 
-  const headerAttrs = computed(() => ({
-    ...headerAttrsRaw.value,
-    class: cx([
-      headerAttrsRaw.value.class,
-      props.mobileFooterReverse && isMobileBreakpoint.value && config.value.footerMobileReverse,
-    ]),
-  }));
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...headerAttrs.value,
+        class: cx([
+          headerAttrs.value.class,
+          props.mobileFooterReverse && isMobileBreakpoint.value && config.value.footerMobileReverse,
+        ]),
+      }));
+    }
 
-  const footerAttrs = computed(() => ({
-    ...footerAttrsRaw.value,
-    class: cx([
-      footerAttrsRaw.value.class,
-      props.mobileFooterReverse && isMobileBreakpoint.value && config.value.footerMobileReverse,
-    ]),
-  }));
+    if (key === "footer") {
+      const footerAttrs = attrs[`${key}Attrs`];
 
-  const footerLeftAttrs = getAttrs("footerLeft");
-  const footerRightAttrs = getAttrs("footerRight");
-  const modalAttrs = getAttrs("modal", { classes: modalClasses });
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...footerAttrs.value,
+        class: cx([
+          footerAttrs.value.class,
+          props.mobileFooterReverse && isMobileBreakpoint.value && config.value.footerMobileReverse,
+        ]),
+      }));
+    }
+  }
 
   return {
+    ...attrs,
     config,
-    modalAttrs,
-    titleAttrs,
-    backLinkAttrs,
-    backLinkIconAttrs,
-    closeIconAttrs,
-    dividerAttrs,
-    dividerSpacingAttrs,
-    overlayAttrs,
-    wrapperAttrs,
-    innerWrapperAttrs,
-    headerAttrs,
-    headerLeftAttrs,
-    headerLeftFallbackAttrs,
-    descriptionAttrs,
-    headerRightAttrs,
-    bodyAttrs,
-    footerLeftAttrs,
-    footerAttrs,
-    footerRightAttrs,
     hasSlotContent,
   };
 }

package/ui.container-modal/configs/default.config.js

@@ -21,17 +21,17 @@ export default /*tw*/ {
   header: "flex items-center justify-between px-4 md:px-8 pb-6 pt-8",
   headerLeft: "flex items-center space-x-4",
   headerLeftFallback: "flex flex-col",
-  backLink: "flex items-center gap-0.5",
-  backLinkIcon: "",
+  backLink: "{ULink} flex items-center gap-0.5",
+  backLinkIcon: "{UIcon}",
   backLinkIconName: "arrow_back",
-  title: "",
+  title: "{UHeader}",
   description: "mt-1.5 text-base font-normal text-gray-500",
   headerRight: "",
-  closeIcon: "",
+  closeIcon: "{UIcon}",
   closeIconName: "close",
   body: "space-y-4 px-4 md:px-8",
-  divider: "",
-  dividerSpacing: "",
+  divider: "{UDivider}",
+  dividerSpacing: "{UDivider}",
   footer: "flex justify-between px-4 md:px-8 py-8 max-md:flex-col max-md:gap-4",
   footerLeft: "flex flex-col md:flex-row space-y-4 md:space-x-4 md:space-y-0 w-full",
   footerRight: "flex flex-col md:flex-row space-y-4 md:space-x-4 md:space-y-0 w-full justify-end",

package/ui.container-modal/index.vue

@@ -112,7 +112,7 @@ import UDivider from "../ui.container-divider";
 
 import defaultConfig from "./configs/default.config";
 import { UModal } from "./constants/index";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UModal", inheritAttrs: false });
@@ -253,7 +253,18 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["update:modelValue", "back"]);
+const emit = defineEmits([
+  /**
+   * Triggers when the modal is toggled.
+   * @property {Boolean} value
+   */
+  "update:modelValue",
+
+  /**
+   * Triggers when back link in modal is clicked.
+   */
+  "back",
+]);
 
 const {
   config,

package/ui.container-modal-confirm/composable/attrs.composable.js

@@ -3,57 +3,38 @@ import defaultConfig from "../configs/default.config";
 import { cva } from "../../service.ui/index.js";
 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 { modal, footerLeftFallback } = config.value;
+  const attrs = {};
 
-  const cvaModal = cva({
-    base: modal.base,
-    variants: modal.variants,
-    compoundVariants: modal.compoundVariants,
-  });
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
 
-  const cvaFooterLeftFallback = cva({
-    base: footerLeftFallback.base,
-    variants: footerLeftFallback.variants,
-    compoundVariants: footerLeftFallback.compoundVariants,
-  });
+    const classes = computed(() => {
+      const value = config.value[key];
 
-  const modalClasses = computed(() =>
-    setColor(
-      cvaModal({
-        color: getColor(props.color),
-      }),
-      props.color,
-    ),
-  );
-
-  const footerLeftFallbackClasses = computed(() =>
-    setColor(cvaFooterLeftFallback({ color: getColor(props.color) }), props.color),
-  );
-
-  const footerLeftFallbackAttrs = getAttrs("footerLeftFallback", {
-    classes: footerLeftFallbackClasses,
-  });
+      if (value.variants || value.compoundVariants) {
+        return setColor(
+          cva(value)({
+            ...props,
+            color: getColor(props.color),
+          }),
+          props.color,
+        );
+      }
 
-  const confirmButtonAttrs = getAttrs("confirmButton", { isComponent: true });
-  const cancelButtonAttrs = getAttrs("cancelButton", { isComponent: true });
-  const modalAttrsRaw = getAttrs("modal", { isComponent: true, classes: modalClasses });
+      return "";
+    });
 
-  const modalAttrs = computed(() => ({
-    ...modalAttrsRaw.value,
-    class: setColor(modalAttrsRaw.value.class, props.color),
-  }));
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
+    ...attrs,
     config,
-    footerLeftFallbackAttrs,
-    modalAttrs,
-    confirmButtonAttrs,
-    cancelButtonAttrs,
     hasSlotContent,
   };
 }

package/ui.container-modal-confirm/configs/default.config.js

@@ -1,8 +1,8 @@
 export default /*tw*/ {
-  modal: "",
+  modal: "{UModal}",
   footerLeftFallback: "flex space-x-4",
-  confirmButton: "w-full",
-  cancelButton: "w-full",
+  confirmButton: "{UButton} w-full",
+  cancelButton: "{UButton} w-full",
   i18n: {
     cancel: "Cancel",
   },

package/ui.container-modal-confirm/index.vue

@@ -70,7 +70,7 @@ import UModal from "../ui.container-modal";
 
 import defaultConfig from "./configs/default.config";
 import { UModalConfirm } from "./constants/index";
-import { useAttrs } from "./composable/attrs.composable";
+import useAttrs from "./composable/attrs.composable";
 import { useLocale } from "../composable.locale";
 
 /* Should be a string for correct web-types gen */
@@ -152,7 +152,23 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["update:modelValue", "confirm", "close"]);
+const emit = defineEmits([
+  /**
+   * Triggers when the modal is toggled.
+   * @property {Boolean} value
+   */
+  "update:modelValue",
+
+  /**
+   * Triggers when the action is confirmed.
+   */
+  "confirm",
+
+  /**
+   * Triggers when the action is declined or modal is closed.
+   */
+  "close",
+]);
 
 const { tm } = useLocale();
 

package/ui.container-page/composables/attrs.composable.js

@@ -4,93 +4,58 @@ import { cva, cx, isMobileApp } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
-export function useAttrs(props, { isMobileBreakpoint }) {
-  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
-  const { wrapper, page, rightRounding } = config.value;
-
-  const cvaWrapper = cva({
-    base: wrapper.base,
-    variants: wrapper.variants,
-    compoundVariants: wrapper.compoundVariants,
-  });
-
-  const cvaPage = cva({
-    base: page.base,
-    variants: page.variants,
-    compoundVariants: page.compoundVariants,
-  });
-
-  const cvaRightRounding = cva({
-    base: rightRounding.base,
-    variants: rightRounding.variants,
-    compoundVariants: rightRounding.compoundVariants,
-  });
-
-  const wrapperClasses = computed(() =>
-    cvaWrapper({
-      width: props.width,
-      fixedRounding: props.fixedRounding,
-    }),
-  );
-
-  const pageClasses = computed(() =>
-    cvaPage({
-      fixedRounding: props.fixedRounding,
-      gray: props.gray,
-    }),
+export default function useAttrs(props, { isMobileBreakpoint }) {
+  const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
   );
-
-  const rightRoundingClasses = computed(() => cvaRightRounding({ gray: props.gray }));
-
-  const wrapperAttrsRaw = getAttrs("wrapper", { classes: wrapperClasses });
-  const pageAttrs = getAttrs("page", { classes: pageClasses });
-  const headerAttrs = getAttrs("header");
-  const headerLeftAttrs = getAttrs("headerLeft");
-  const headerRightAttrs = getAttrs("headerRight");
-  const headerLeftFallbackAttrs = getAttrs("headerLeftFallback");
-  const backLinkAttrs = getAttrs("backLink", { isComponent: true });
-  const backLinkIconAttrs = getAttrs("backLinkIcon", { isComponent: true });
-  const titleAttrs = getAttrs("title", { isComponent: true });
-  const descriptionAttrs = getAttrs("description");
-  const footerAttrsRaw = getAttrs("footer");
-  const footerLeftAttrs = getAttrs("footerLeft");
-  const footerRightAttrs = getAttrs("footerRight");
-  const rightRoundingWrapperAttrs = getAttrs("rightRoundingWrapper");
-  const rightRoundingAttrs = getAttrs("rightRounding", { classes: rightRoundingClasses });
-
-  const wrapperAttrs = computed(() => ({
-    ...wrapperAttrsRaw.value,
-    class: cx([
-      wrapperAttrsRaw.value.class,
-      isMobileBreakpoint.value && !isMobileApp && config.value.wrapperMobile,
-    ]),
-  }));
-
-  const footerAttrs = computed(() => ({
-    ...footerAttrsRaw.value,
-    class: cx([
-      footerAttrsRaw.value.class,
-      props.mobileFooterReverse && isMobileBreakpoint.value && config.value.footerMobileReverse,
-    ]),
-  }));
+  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,
+        });
+      }
+
+      return "";
+    });
+
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+
+    if (key === "wrapper") {
+      const wrapperAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...wrapperAttrs.value,
+        class: cx([
+          wrapperAttrs.value.class,
+          isMobileBreakpoint.value && !isMobileApp && config.value.wrapperMobile,
+        ]),
+      }));
+    }
+
+    if (key === "footer") {
+      const footerAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...footerAttrs.value,
+        class: cx([
+          footerAttrs.value.class,
+          props.mobileFooterReverse && isMobileBreakpoint.value && config.value.footerMobileReverse,
+        ]),
+      }));
+    }
+  }
 
   return {
+    ...attrs,
     config,
-    wrapperAttrs,
-    pageAttrs,
-    rightRoundingWrapperAttrs,
-    rightRoundingAttrs,
-    headerAttrs,
-    headerRightAttrs,
-    headerLeftAttrs,
-    headerLeftFallbackAttrs,
-    titleAttrs,
-    backLinkAttrs,
-    backLinkIconAttrs,
-    descriptionAttrs,
-    footerAttrs,
-    footerLeftAttrs,
-    footerRightAttrs,
     hasSlotContent,
   };
 }

package/ui.container-page/configs/default.config.js

@@ -38,10 +38,10 @@ export default /*tw*/ {
   header: "flex items-start justify-between mb-4 md:mb-6",
   headerLeft: "flex items-center space-x-4",
   headerLeftFallback: "flex flex-col",
-  backLink: "flex items-center gap-0.5",
-  backLinkIcon: "",
+  backLink: "{ULink} flex items-center gap-0.5",
+  backLinkIcon: "{UIcon}",
   backLinkIconName: "arrow_back",
-  title: "",
+  title: "{UHeader}",
   description: "mt-1.5 text-base font-normal text-gray-600",
   headerRight: "",
   footer: `mb-0 mt-14 justify-between pt-8 md:flex md:items-baseline space-y-4 md:space-y-0 border-t border-gray-200`,

package/ui.container-page/index.vue

@@ -90,7 +90,7 @@ import UIService from "../service.ui";
 
 import defaultConfig from "./configs/default.config";
 import { UPage } from "./constants";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 
 const slots = useSlots();
 

package/ui.container-row/composables/attrs.composable.js

@@ -3,27 +3,30 @@ import defaultConfig from "../configs/default.config";
 import { cva } from "../../service.ui";
 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({
-      gap: props.gap,
-      align: props.align,
-      noMobile: props.noMobile,
-    }),
-  );
+    const classes = computed(() => {
+      const value = config.value[key];
 
-  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
+          ...props,
+        });
+      }
+
+      return "";
+    });
+
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
-    wrapperAttrs,
+    ...attrs,
+    config,
   };
 }

package/ui.container-row/index.vue

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

package/ui.data-table/components/TableRow.vue

@@ -43,7 +43,7 @@
 
       <div v-if="value?.hasOwnProperty('secondary')">
         <slot :name="`cell-${key}`" :value="value" :row="row">
-          <div :data-cy="`${dataCy}-${key}-cell`">
+          <div :data-cy="`${dataCy}-${key}-cell`" v-bind="attrs.bodyCellPrimaryAttrs">
             {{ value.primary || HYPHEN_SYMBOL }}
           </div>
 

package/ui.data-table/composables/attrs.composable.js

@@ -114,6 +114,7 @@ export function useAttrs(
   const bodyRowBeforeCellAttrsRaw = getAttrs("bodyRowBeforeCell");
   const bodyRowAfterAttrs = getAttrs("bodyRowAfter");
   const bodyRowAfterCellAttrsRaw = getAttrs("bodyRowAfterCell");
+  const bodyCellPrimaryAttrs = getAttrs("bodyCellPrimary");
 
   const bodyRowAttrsRaw = getAttrs("bodyRow");
 
@@ -259,5 +260,6 @@ export function useAttrs(
     stickyFooterRowAttrs,
     hasSlotContent,
     headerAttrs,
+    bodyCellPrimaryAttrs,
   };
 }

package/ui.data-table/configs/default.config.js

@@ -26,7 +26,7 @@ export default /*tw*/ {
   stickyHeaderActionsCheckbox: "",
   stickyHeaderActionsCounter: "-ml-2",
   tableWrapper: "border border-gray-200 rounded-lg bg-white",
-  table: "min-w-full border-none text-sm w-full",
+  table: "min-w-full border-none text-sm w-full table-fixed",
   header: "border-b border-gray-200",
   headerRow: "",
   headerCell: "",
@@ -57,7 +57,8 @@ export default /*tw*/ {
       },
     },
   },
-  bodyCellSecondary: "mt-1 text-xs text-gray-500",
+  bodyCellPrimary: "text-ellipsis overflow-hidden",
+  bodyCellSecondary: "mt-1 text-xs text-gray-500 overflow-hidden text-ellipsis",
   bodyCellSecondaryEmpty: "inline-block",
   bodyCellCheckbox: "first:px-4", // try to remove first
   bodyCellDateSeparator: "",

package/ui.data-table/index.vue

@@ -169,6 +169,7 @@
                 bodyCellNestedCollapseIconAttrs,
                 bodyCellNestedExpandIconAttrs,
                 bodyCellNestedAttrs,
+                bodyCellPrimaryAttrs,
               }"
               @click="onClickRow"
               @toggle-row-visibility="onToggleRowVisibility"
@@ -469,6 +470,7 @@ const {
   stickyFooterRowAttrs,
   hasSlotContent,
   headerAttrs,
+  bodyCellPrimaryAttrs,
 } = useAttrs(props, {
   tableRows,
   isShownActionsHeader,

package/ui.form-date-picker-range/configs/default.config.js

@@ -34,8 +34,7 @@ export default /*tw*/ {
   },
   periodsRow: "mb-1 flex min-w-64 gap-1",
   periodButton: `
-    flex h-[3.125rem] w-full cursor-pointer flex-col items-center justify-center rounded-lg bg-gray-100
-    px-1.5 py-2.5 text-center text-xs font-medium text-brand-900 hover:bg-brand-200
+    h-[3.125rem] w-full flex flex-col items-center justify-center
     [&_span]:block [&_span]:font-normal [&_span]:text-brand-500
   `,
   periodButtonIcon: "",
@@ -52,10 +51,7 @@ export default /*tw*/ {
   periodDateWeekList: "",
   periodDateYearList: "grid grid-cols-3 grid-rows-1 gap-0.5",
   periodDateQuarterList: "",
-  periodDate: `
-    cursor-pointer block w-full rounded-lg py-3 text-center text-sm font-medium text-gray-900 hover:rounded-lg hover:bg-brand-50
-    disabled:opacity-50 disabled:cursor-not-allowed
-  `,
+  periodDate: "w-full",
   periodDateActive: "bg-gray-100",
   rangeInputWrapper: "flex mt-4",
   rangeInput: {