vueless 0.0.163 → 0.0.165

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

@@ -200,7 +200,7 @@ export default /*tw*/ {
     openDirectionY: "auto",
     timepicker: false,
     disabled: false,
-    dateFormat: "d.m.Y",
+    dateFormat: undefined,
     maxDate: undefined,
     minDate: undefined,
   },

package/ui.form-date-picker-range/index.stories.js

@@ -14,8 +14,8 @@ export default {
   component: UDatePickerRange,
   args: {
     value: {
-      from: 1651813634,
-      to: 1654492034,
+      from: new Date(2022, 1, 14),
+      to: new Date(2022, 2, 20),
     },
   },
   argTypes: {
@@ -37,12 +37,21 @@ const DefaultTemplate = (args) => ({
 
     return { args, slots };
   },
+  data() {
+    return {
+      value: this.args.value,
+    };
+  },
   template: `
-    <UDatePickerRange v-bind="args" v-model="args.value">
+    <UDatePickerRange v-bind="args" v-model="value">
       <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
         <template v-if="args[slot]">{{ args[slot] }}</template>
       </template>
     </UDatePickerRange>
+
+    <div class="mt-4">
+      {{ value }}
+    </div>
   `,
 });
 
@@ -142,9 +151,16 @@ error.args = { variant: "input", error: "some error" };
 
 export const MinMax = DefaultTemplate.bind({});
 MinMax.args = {
-  minDate: "22.02.2022",
-  maxDate: "26.02.2022",
-  value: { from: 1645653600, to: null },
+  minDate: new Date(2022, 2, 22),
+  maxDate: new Date(2022, 2, 26),
+  value: { from: new Date(2022, 2, 24), to: null },
+};
+
+export const DateFormat = DefaultTemplate.bind({});
+DateFormat.args = {
+  dateFormat: "d.m.Y",
+  userFormat: "d.m.Y",
+  value: { from: "28.06.2024", to: "30.06.2024" },
 };
 
 export const customRangeButton = DefaultTemplate.bind({});

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

@@ -199,13 +199,9 @@ import UIService, { getRandomId } from "../service.ui";
 
 import {
   addDays,
-  gmtToUTC,
-  getUnixTimestampFromDate,
   addMonths,
   addYears,
-  getDateFromUnixTimestamp,
   getSortedLocale,
-  utcToGMT,
   getEndOfMonth,
   getEndOfQuarter,
   getEndOfWeek,
@@ -251,7 +247,7 @@ defineOptions({ name: "UDatePickerRange", inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Dater picker range value as object with from and to keys (timestamp).
+   * Datepicker value in JS Date Objects or Strings formatted in provided props.dateFormat.
    */
   modelValue: {
     type: Object,
@@ -267,7 +263,7 @@ const props = defineProps({
   customRangeButton: {
     type: Object,
     default: () => ({
-      range: { from: 0, to: 0 },
+      range: { from: null, to: null },
       label: "",
       description: "",
     }),
@@ -444,9 +440,32 @@ const {
 } = useAttrs(props, { isShownMenu, isTop, isRight });
 const { tm } = useLocale();
 
+const i18nGlobal = tm(UDatePickerRange);
+
+const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
+
+const locale = computed(() => {
+  const { months, weekdays } = currentLocale.value;
+
+  // formatted locale
+  return {
+    ...currentLocale.value,
+    months: {
+      shorthand: getSortedLocale(months.shorthand, LOCALE_TYPE.month),
+      longhand: getSortedLocale(months.longhand, LOCALE_TYPE.month),
+    },
+    weekdays: {
+      shorthand: getSortedLocale(weekdays.shorthand, LOCALE_TYPE.day),
+      longhand: getSortedLocale(weekdays.longhand, LOCALE_TYPE.day),
+    },
+  };
+});
+
 const calendarValue = ref(props.modelValue);
 const activeDate = ref(
-  props.modelValue.from !== null ? getDateFromUnixTimestamp(props.modelValue.from) : new Date(),
+  props.modelValue.from !== null
+    ? parseDate(props.modelValue.from, props.dateFormat, locale.value)
+    : new Date(),
 );
 const period = ref(PERIOD.ownRange);
 const rangeStart = ref("");
@@ -457,39 +476,39 @@ const isHoverEvent = ref(false);
 const periodDateList = ref(null);
 
 const { isMobileBreakpoint } = useBreakpoint();
-const i18nGlobal = tm(UDatePickerRange);
 
 const localValue = computed({
-  get: () => props.modelValue,
+  get: () => {
+    return {
+      from: parseDate(props.modelValue.from || null, props.dateFormat, locale.value),
+      to: parseDate(props.modelValue.to || null, props.dateFormat, locale.value),
+    };
+  },
   set: (value) => {
-    if (value.from && value.to) {
+    if (value.from && value.to && !props.dateFormat) {
       emit("update:modelValue", value);
     }
 
-    activeDate.value = getDateFromUnixTimestamp(value.from || new Date());
-  },
-});
+    const parsedDateFrom = parseDate(value.from || null, props.dateFormat, locale.value);
+    const parsedDateTo = parseDate(value.to || null, props.dateFormat, locale.value);
 
-const rangeInputName = computed(() => `rangeInput-${props.id}`);
-const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
+    if (value.from && value.to && props.dateFormat) {
+      const newValue = {
+        from: formatDate(parsedDateFrom, props.dateFormat, locale.value),
+        to: formatDate(parsedDateTo, props.dateFormat, locale.value),
+      };
 
-const locale = computed(() => {
-  const { months, weekdays } = currentLocale.value;
+      emit("update:modelValue", newValue);
+    }
 
-  // formatted locale
-  return {
-    ...currentLocale.value,
-    months: {
-      shorthand: getSortedLocale(months.shorthand, LOCALE_TYPE.month),
-      longhand: getSortedLocale(months.longhand, LOCALE_TYPE.month),
-    },
-    weekdays: {
-      shorthand: getSortedLocale(weekdays.shorthand, LOCALE_TYPE.day),
-      longhand: getSortedLocale(weekdays.longhand, LOCALE_TYPE.day),
-    },
-  };
+    activeDate.value = props.dateFormat
+      ? formatDate(parsedDateFrom || new Date(), props.dateFormat, locale.value)
+      : value.from || new Date();
+  },
 });
 
+const rangeInputName = computed(() => `rangeInput-${props.id}`);
+
 const userFormatLocale = computed(() => {
   const { months, weekdays } = currentLocale.value;
 
@@ -575,8 +594,8 @@ const userFormatDate = computed(() => {
 
   const isDefaultTitle = isPeriod.value.week || isPeriod.value.custom || isPeriod.value.ownRange;
 
-  const from = getDateFromUnixTimestamp(localValue.value.from);
-  const to = localValue.value.to !== null ? getDateFromUnixTimestamp(localValue.value.to) : null;
+  const from = localValue.value.from;
+  const to = localValue.value.to !== null ? localValue.value.to : null;
 
   if (isDefaultTitle) {
     let startMonthName = userFormatLocale.value.months.longhand[from.getMonth()];
@@ -637,14 +656,8 @@ watch(
   calendarValue,
   () => {
     localValue.value = {
-      from:
-        calendarValue.value.from === null
-          ? calendarValue.value.from
-          : getUnixTimestampFromDate(gmtToUTC(getDateFromUnixTimestamp(calendarValue.value.from))),
-      to:
-        calendarValue.value.to === null
-          ? calendarValue.value.to
-          : getUnixTimestampFromDate(gmtToUTC(getDateFromUnixTimestamp(calendarValue.value.to))),
+      from: calendarValue.value.from,
+      to: calendarValue.value.to,
     };
 
     nextTick(() => menuRef.value?.focus());
@@ -655,21 +668,22 @@ watch(
 watch(
   () => props.modelValue,
   () => {
-    if (props.modelValue.to !== calendarValue.value.to) {
+    if (String(props.modelValue.to) !== String(calendarValue.value.to)) {
       calendarValue.value.to = props.modelValue.to;
     }
 
-    if (props.modelValue.from !== calendarValue.value.from) {
+    if (String(props.modelValue.from) !== String(calendarValue.value.from)) {
       calendarValue.value.from = props.modelValue.from;
     }
 
+    const parsedDateFrom = parseDate(props.modelValue.from, props.dateFormat, locale.value);
+    const parsedDateTo = parseDate(props.modelValue.to, props.dateFormat, locale.value);
+
     rangeStart.value = props.modelValue.from
-      ? formatDate(getDateFromUnixTimestamp(props.modelValue.from), props.dateFormat, locale.value)
+      ? formatDate(parsedDateFrom, "d.m.Y", locale.value)
       : "";
 
-    rangeEnd.value = props.modelValue.to
-      ? formatDate(getDateFromUnixTimestamp(props.modelValue.to), props.dateFormat, locale.value)
-      : "";
+    rangeEnd.value = props.modelValue.to ? formatDate(parsedDateTo, "d.m.Y", locale.value) : "";
 
     inputRangeStartError.value = "";
     inputRangeEndError.value = "";
@@ -678,13 +692,11 @@ watch(
 );
 
 watch(period, () => {
-  activeDate.value =
-    localValue.value.from !== null ? getDateFromUnixTimestamp(localValue.value.from) : new Date();
+  activeDate.value = localValue.value.from !== null ? localValue.value.from : new Date();
 });
 
 function onClickPeriodButton(periodName) {
-  const localDate =
-    localValue.value.from !== null ? getDateFromUnixTimestamp(localValue.value.from) : new Date();
+  const localDate = localValue.value.from !== null ? localValue.value.from : new Date();
 
   if (periodName === PERIOD.week) {
     periodDateList.value = getWeekDateList(localDate, locale.value.months.shorthand);
@@ -736,37 +748,21 @@ function onClickCustomRangeButton() {
 }
 
 function selectCustomRange() {
-  const from =
-    typeof props.customRangeButton.range.from === "number"
-      ? getDateFromUnixTimestamp(props.customRangeButton.range.from)
-      : props.customRangeButton.range.from;
-
-  const to =
-    typeof props.customRangeButton.range.to === "number"
-      ? getDateFromUnixTimestamp(props.customRangeButton.range.to)
-      : props.customRangeButton.range.to;
-
   localValue.value = {
-    from: getUnixTimestampFromDate(gmtToUTC(from)),
-    to: getUnixTimestampFromDate(gmtToUTC(to)),
+    from: props.customRangeButton.range.from,
+    to: props.customRangeButton.range.to,
   };
 }
 
 function isDatePeriodOutOfRange(datePeriod) {
   return (
     dateIsOutOfRange(
-      getDateFromUnixTimestamp(datePeriod.startRange),
+      datePeriod.startRange,
       props.minDate,
       props.maxDate,
       locale.value,
       props.dateFormat,
-    ) ||
-    dateIsOutOfRange(
-      getDateFromUnixTimestamp(datePeriod.endRange),
-      props.minDate,
-      props.maxDate,
-      props.dateFormat,
-    )
+    ) || dateIsOutOfRange(datePeriod.endRange, props.minDate, props.maxDate, props.dateFormat)
   );
 }
 
@@ -874,8 +870,7 @@ function onInputRangeInput(value, type) {
     inputRangeEndError.value = error;
   }
 
-  const parsedValue = gmtToUTC(parseDate(value || new Date(), props.dateFormat, locale.value));
-  const unixTimeValue = getUnixTimestampFromDate(parsedValue);
+  const parsedValue = parseDate(value || new Date(), props.dateFormat, locale.value);
   const isOutOfRange = dateIsOutOfRange(
     parsedValue,
     props.minDate,
@@ -883,25 +878,25 @@ function onInputRangeInput(value, type) {
     locale.value,
     props.dateFormat,
   );
-  const isToLessThanFrom = unixTimeValue <= localValue.value.from;
+  const isToLessThanFrom = parsedValue <= localValue.value.from;
 
   if (type === INPUT_RANGE_TYPE.start && !error && !isOutOfRange) {
-    localValue.value.from = value ? unixTimeValue : "";
+    localValue.value.from = value ? parsedValue : "";
   }
 
   if (type === INPUT_RANGE_TYPE.end && !error && !isOutOfRange && !isToLessThanFrom) {
-    localValue.value.to = value ? unixTimeValue : "";
+    localValue.value.to = value ? parsedValue : "";
   }
 }
 
 setDefaultPeriodForButton();
 
 function setDefaultPeriodForButton() {
-  const from = utcToGMT(getDateFromUnixTimestamp(props.modelValue.from || new Date()));
-  const to = utcToGMT(getDateFromUnixTimestamp(props.modelValue.to || new Date()));
+  const from = props.modelValue.from || new Date();
+  const to = props.modelValue.to || new Date();
 
-  const customFrom = utcToGMT(getDateFromUnixTimestamp(props.customRangeButton.range.from));
-  const customTo = utcToGMT(getDateFromUnixTimestamp(props.customRangeButton.range.to));
+  const customFrom = props.customRangeButton.range.from || new Date();
+  const customTo = props.customRangeButton.range.to || new Date();
 
   const isWeekPeriod =
     String(from) === String(getStartOfWeek(from, { weekStartsOn: 1 })) &&
@@ -946,15 +941,15 @@ function onClickShiftRange(action) {
   const millisecondsPerDay =
     millisecondsPerSecond * secondsPerMinute * minutesPerHour * hoursPerDay;
 
-  const from = getDateFromUnixTimestamp(localValue.value.from);
-  const to = localValue.value.to ? getDateFromUnixTimestamp(localValue.value.to) : addDays(from, 1);
+  const from = localValue.value.from;
+  const to = localValue.value.to ? localValue.value.to : addDays(from, 1);
   const daysDifference = Math.ceil(Math.abs(getDatesDifference(from, to)) / millisecondsPerDay);
 
   if (action === "next") {
     if (isPeriod.value.ownRange) {
       const nextDate = {
-        to: getUnixTimestampFromDate(addDays(to, daysDifference)),
-        from: getUnixTimestampFromDate(addDays(from, daysDifference)),
+        to: addDays(to, daysDifference),
+        from: addDays(from, daysDifference),
       };
 
       if (isDatePeriodOutOfRange(nextDate)) return;
@@ -979,8 +974,8 @@ function onClickShiftRange(action) {
   } else {
     if (isPeriod.value.ownRange) {
       const previousDate = {
-        to: getUnixTimestampFromDate(gmtToUTC(addDays(to, daysDifference * -1))),
-        from: getUnixTimestampFromDate(gmtToUTC(addDays(from, daysDifference * -1))),
+        to: addDays(to, daysDifference * -1),
+        from: addDays(from, daysDifference * -1),
       };
 
       if (isDatePeriodOutOfRange(previousDate)) return;

package/ui.form-date-picker-range/services/dateRange.service.js

@@ -2,9 +2,7 @@ import {
   getWeeksInMonth,
   getStartOfWeek,
   getEndOfWeek,
-  gmtToUTC,
   addWeeks,
-  getUnixTimestampFromDate,
   getEndOfMonth,
   getStartOfMonth,
   getEndOfQuarter,
@@ -27,8 +25,8 @@ export function getYearDateList(date) {
 
     years.push({
       title: currentYear,
-      startRange: getUnixTimestampFromDate(gmtToUTC(getStartOfYear(new Date(currentYear, month)))),
-      endRange: getUnixTimestampFromDate(gmtToUTC(getEndOfYear(new Date(currentYear, month)))),
+      startRange: getStartOfYear(new Date(currentYear, month)),
+      endRange: getEndOfYear(new Date(currentYear, month)),
     });
   }
 
@@ -51,8 +49,8 @@ export function getQuartersDateList(date, quarterLocales = "") {
 
     quarters.push({
       title: `${currentQuarter} ${quarterLocales}`,
-      startRange: getUnixTimestampFromDate(gmtToUTC(getStartOfQuarter(newQuarter))),
-      endRange: getUnixTimestampFromDate(gmtToUTC(getEndOfQuarter(newQuarter))),
+      startRange: getStartOfQuarter(newQuarter),
+      endRange: getEndOfQuarter(newQuarter),
     });
   }
 
@@ -65,8 +63,8 @@ export function getMonthsDateList(date, monthLocales = []) {
   const months = monthLocales.map((item, index) => {
     return {
       title: item,
-      startRange: getUnixTimestampFromDate(gmtToUTC(getStartOfMonth(new Date(year, index)))),
-      endRange: getUnixTimestampFromDate(gmtToUTC(getEndOfMonth(new Date(year, index)))),
+      startRange: getStartOfMonth(new Date(year, index)),
+      endRange: getEndOfMonth(new Date(year, index)),
     };
   });
 
@@ -105,8 +103,8 @@ export function getWeekDateList(date, monthShortLocales = {}) {
 
     weeks.push({
       title,
-      startRange: getUnixTimestampFromDate(gmtToUTC(startOfWeekDate)),
-      endRange: getUnixTimestampFromDate(gmtToUTC(endOfWeekDate)),
+      startRange: startOfWeekDate,
+      endRange: endOfWeekDate,
     });
   }
 

package/ui.form-radio/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 
 export function useAttrs(props, { radioColor, radioSize }) {
-  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
   const { radio } = config.value;
 
   const cvaRadio = cva({
@@ -17,7 +17,7 @@ export function useAttrs(props, { radioColor, radioSize }) {
   const radioClasses = computed(() =>
     setColor(
       cvaRadio({
-        color: radioColor.value,
+        color: getColor(radioColor.value),
         size: radioSize.value,
       }),
       radioColor.value,

package/ui.form-switch/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export function useAttrs(props, { checked }) {
-  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
   const { wrapper, circle, toggleLabel } = config.value;
 
   const cvaWrapper = cva({
@@ -30,7 +30,7 @@ export function useAttrs(props, { checked }) {
     setColor(
       cvaWrapper({
         size: props.size,
-        color: props.color,
+        color: getColor(props.color),
         disabled: props.disabled,
         checked: Boolean(checked.value),
         toggleLabel: props.toggleLabel,
@@ -50,7 +50,7 @@ export function useAttrs(props, { checked }) {
     setColor(
       cvaToggleLabel({
         size: props.size,
-        color: props.color,
+        color: getColor(props.color),
         toggleLabel: props.toggleLabel,
         checked: Boolean(checked.value),
       }),

package/ui.image-avatar/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export function useAttrs(props) {
-  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
   const { avatar } = config.value;
 
   const cvaAvatar = cva({
@@ -18,7 +18,7 @@ export function useAttrs(props) {
     setColor(
       cvaAvatar({
         size: props.size,
-        color: props.color,
+        color: getColor(props.color),
         rounded: props.rounded,
         bordered: props.bordered,
       }),

package/ui.image-icon/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export function useAttrs(props) {
-  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
   const { wrapper, container, icon } = config.value;
 
   const cvaWrapper = cva({
@@ -31,7 +31,7 @@ export function useAttrs(props) {
       cvaWrapper({
         pill: props.pill,
         size: props.size,
-        color: props.color,
+        color: getColor(props.color),
       }),
       props.color,
     ),
@@ -42,7 +42,7 @@ export function useAttrs(props) {
       cvaContainer({
         pill: props.pill,
         size: props.size,
-        color: props.color,
+        color: getColor(props.color),
         variant: props.variant,
         interactive: props.interactive,
       }),

package/ui.loader/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export function useAttrs(props) {
-  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
   const { loader, ellipse } = config.value;
 
   const cvaLoader = cva({
@@ -30,7 +30,7 @@ export function useAttrs(props) {
     setColor(
       cvaEllipse({
         size: props.size,
-        color: props.color,
+        color: getColor(props.color),
       }),
       props.color,
     ),

package/ui.loader-rendering/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 
 export function useAttrs(props) {
-  const { getAttrs, setColor, config } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
   const { wrapper } = config.value;
 
   const cvaWrapper = cva({
@@ -17,7 +17,7 @@ export function useAttrs(props) {
   const wrapperClasses = computed(() =>
     setColor(
       cvaWrapper({
-        color: props.color,
+        color: getColor(props.color),
       }),
       props.color,
     ),

package/ui.loader-top/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export function useAttrs(props) {
-  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
   const { progress } = config.value;
 
   const cvaProgress = cva({
@@ -15,7 +15,12 @@ export function useAttrs(props) {
   });
 
   const progressClasses = computed(() =>
-    setColor(cvaProgress({ color: props.color }), props.color),
+    setColor(
+      cvaProgress({
+        color: getColor(props.color),
+      }),
+      props.color,
+    ),
   );
 
   const progressAttrs = getAttrs("progress", { classes: progressClasses.value });

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

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export function useAttrs(props) {
-  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
   const { progress } = config.value;
 
   const cvaProgress = cva({
@@ -18,7 +18,7 @@ export function useAttrs(props) {
     setColor(
       cvaProgress({
         size: props.size,
-        color: props.color,
+        color: getColor(props.color),
       }),
       props.color,
     ),

package/ui.other-dot/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export function useAttrs(props) {
-  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
   const { wrapper } = config.value;
 
   const cvaWrapper = cva({
@@ -18,7 +18,7 @@ export function useAttrs(props) {
     setColor(
       cvaWrapper({
         size: props.size,
-        color: props.color,
+        color: getColor(props.color),
       }),
       props.color,
     ),

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

@@ -5,7 +5,10 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export function useAttrs(props) {
-  const { config, getAttrs, setColor, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, hasSlotContent, getColor, setColor } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
   const { wrapper, body } = config.value;
 
   const cvaWrapper = cva({
@@ -23,7 +26,7 @@ export function useAttrs(props) {
   const wrapperClasses = computed(() =>
     setColor(
       cvaWrapper({
-        color: props.color,
+        color: getColor(props.color),
         bordered: props.bordered,
       }),
       props.color,

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

@@ -43,5 +43,9 @@ export default /*tw*/ {
     bordered: false,
     closeIcon: false,
   },
-  safelist: (colors) => [{ pattern: `bg-(${colors})-50` }, { pattern: `text-(${colors})-700` }, { pattern: `border-(${colors})-100` }],
+  safelist: (colors) => [
+    { pattern: `bg-(${colors})-50` },
+    { pattern: `text-(${colors})-700` },
+    { pattern: `border-(${colors})-100` },
+  ],
 };

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

@@ -5,7 +5,10 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export function useAttrs(props) {
-  const { config, getAttrs, hasSlotContent, setColor } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, hasSlotContent, getColor, setColor } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
   const { wrapper, body } = config.value;
 
   const cvaWrapper = cva({
@@ -25,7 +28,7 @@ export function useAttrs(props) {
       cvaWrapper({
         variant: props.variant,
         size: props.size,
-        color: props.color,
+        color: getColor(props.color),
         weight: props.weight,
       }),
       props.color,