vueless 0.0.207 → 0.0.209

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.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: {

package/ui.form-date-picker-range/index.vue

@@ -79,27 +79,35 @@
         @keydown.esc="deactivate"
       >
         <div v-bind="periodsRowAttrs">
-          <div
+          <UButton
             v-for="periodButton in periods"
             :key="periodButton.name"
+            variant="thirdary"
+            size="xs"
+            square
+            color="brand"
             v-bind="periodButtonAttrs(getPeriodButtonsClasses(periodButton.name))"
             @click="onClickPeriodButton(periodButton.name)"
           >
             {{ periodButton.title }}
-          </div>
+          </UButton>
         </div>
 
         <div v-bind="periodsRowAttrs">
-          <div
+          <UButton
             v-if="customRangeButton.range.to && customRangeButton.range.from"
+            variant="thirdary"
+            color="brand"
             v-bind="periodButtonAttrs(getPeriodButtonsClasses(PERIOD.custom))"
             @click="onClickCustomRangeButton"
           >
             {{ customRangeButton.label }}
             <span v-if="customRangeButton.description" v-text="customRangeButton.description" />
-          </div>
+          </UButton>
 
-          <div
+          <UButton
+            variant="thirdary"
+            color="brand"
             v-bind="periodButtonAttrs(getPeriodButtonsClasses(PERIOD.ownRange))"
             @click="onClickOwnRange"
           >
@@ -110,7 +118,7 @@
               v-bind="periodButtonIconAttrs"
             />
             {{ locale.ownRange }}
-          </div>
+          </UButton>
         </div>
 
         <template v-if="!isPeriod.ownRange && !isPeriod.custom">
@@ -141,13 +149,16 @@
           </div>
 
           <div v-bind="periodDateListAttrs(getPeriodDateListClasses())">
-            <button
+            <UButton
               v-for="date in periodDateList"
               :key="date.title"
               :disabled="isDatePeriodOutOfRange(date)"
+              variant="thirdary"
+              color="brand"
+              size="sm"
               v-bind="periodDateAttrs(getPeriodDateClasses(date))"
+              :label="String(date.title)"
               @click="selectDate(date), toggleMenu()"
-              v-text="date.title"
             />
           </div>
         </template>
@@ -522,9 +533,7 @@ const localValue = computed({
       emit("update:modelValue", newValue);
     }
 
-    activeDate.value = props.dateFormat
-      ? formatDate(parsedDateFrom || new Date(), props.dateFormat, locale.value)
-      : value.from || new Date();
+    activeDate.value = props.dateFormat ? parsedDateFrom || new Date() : value.from || new Date();
   },
 });
 
@@ -739,7 +748,15 @@ watch(
 );
 
 watch(period, () => {
-  activeDate.value = localValue.value.from !== null ? localValue.value.from : new Date();
+  const isDate = localValue.value.from !== null;
+
+  if (isDate && !props.dateFormat) {
+    activeDate.value = isDate ? localValue.value.from : new Date();
+  }
+
+  if (isDate && props.dateFormat) {
+    activeDate.value = isDate ? parseDate(localValue.value.from, locale.value) : new Date();
+  }
 });
 
 function onClickPeriodButton(periodName) {

package/ui.form-input/index.stories.js

@@ -30,9 +30,7 @@ const DefaultTemplate = (args) => ({
     return { args, slots };
   },
   template: `
-    <UInput
-        v-bind="args"
-    >
+    <UInput v-bind="args" v-model="args.modelValue">
       ${allSlotsFragment}
     </UInput>
   `,
@@ -44,8 +42,7 @@ const SlotTemplate = (args) => ({
     return { args };
   },
   template: `
-    <UInput v-bind="args"
-    >
+    <UInput v-bind="args">
       ${args.slotTemplate}
     </UInput>
   `,