vueless 0.0.776 → 0.0.778

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.776",
+  "version": "0.0.778",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.data-table/UTable.vue

@@ -19,7 +19,7 @@ import ULoaderProgress from "../ui.loader-progress/ULoaderProgress.vue";
 import UTableRow from "./UTableRow.vue";
 
 import useUI from "../composables/useUI.ts";
-import { getDefaults, cx } from "../utils/ui.ts";
+import { getDefaults, cx, getMergedConfig } from "../utils/ui.ts";
 import { hasSlotContent } from "../utils/helper.ts";
 import { useLocale } from "../composables/useLocale.ts";
 import { PX_IN_REM } from "../constants.js";
@@ -37,8 +37,17 @@ import {
 
 import { COMPONENT_NAME } from "./constants.ts";
 
-import type { Cell, Row, RowId, UTableProps, UTableRowAttrs, Config } from "./types.ts";
 import type { Ref, ComputedRef } from "vue";
+import type { Config as UDividerConfig } from "../ui.container-divider/types.ts";
+import type {
+  Cell,
+  Row,
+  RowId,
+  UTableProps,
+  UTableRowAttrs,
+  Config,
+  DateDivider,
+} from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
@@ -256,10 +265,21 @@ function onWindowResize() {
   setFooterCellWidth();
 }
 
-function getDateDividerLabel(rowDate: string | Date) {
-  return Array.isArray(props.dateDivider)
-    ? props.dateDivider.find((dateItem) => dateItem.date === rowDate)?.label || String(rowDate)
-    : String(rowDate);
+function getDateDividerData(rowDate: string | Date) {
+  let dividerItem = {} as DateDivider;
+
+  if (Array.isArray(props.dateDivider)) {
+    const dividerItemData = props.dateDivider.find((dateItem) => dateItem.date === rowDate);
+
+    if (dividerItemData) {
+      dividerItem = dividerItemData;
+    }
+  }
+
+  return {
+    label: dividerItem?.label || String(rowDate),
+    config: dividerItem?.config,
+  };
 }
 
 function setFooterCellWidth(zero?: null) {
@@ -684,8 +704,14 @@ const {
               <td v-bind="bodyCellDateDividerAttrs" :colspan="colsCount">
                 <UDivider
                   size="xs"
-                  :label="getDateDividerLabel(row.rowDate)"
+                  :label="getDateDividerData(row.rowDate).label"
                   v-bind="bodyDateDividerAttrs"
+                  :config="
+                    getMergedConfig({
+                      defaultConfig: bodyDateDividerAttrs.config,
+                      globalConfig: getDateDividerData(row.rowDate).config,
+                    }) as UDividerConfig
+                  "
                 />
               </td>
             </tr>
@@ -697,8 +723,14 @@ const {
               <td v-bind="bodyCellDateDividerAttrs" :colspan="colsCount">
                 <UDivider
                   size="xs"
-                  :label="getDateDividerLabel(row.rowDate)"
+                  :label="getDateDividerData(row.rowDate).label"
                   v-bind="bodySelectedDateDividerAttrs"
+                  :config="
+                    getMergedConfig({
+                      defaultConfig: bodyDateDividerAttrs.config,
+                      globalConfig: getDateDividerData(row.rowDate).config,
+                    }) as UDividerConfig
+                  "
                 />
               </td>
             </tr>

package/ui.data-table/storybook/stories.ts

@@ -334,7 +334,13 @@ DateDividerCustomLabel.args = {
   rows: Array(10)
     .fill({})
     .map(() => getDateDividerRow()),
-  dateDivider: [{ date: new Date().toString(), label: "Custom label for specific date" }],
+  dateDivider: [
+    {
+      date: new Date().toString(),
+      label: "Custom label for specific date",
+      config: { label: "!text-orange-400", divider: "!border-orange-300" },
+    },
+  ],
 };
 
 export const SlotDefault = DefaultTemplate.bind({});

package/ui.data-table/types.ts

@@ -2,6 +2,7 @@ import defaultConfig from "./config.ts";
 
 import type { Ref } from "vue";
 import type { ComponentConfig, UnknownObject } from "../types.ts";
+import type { Config as UDividerConfig } from "../ui.container-divider/types.ts";
 
 export type Config = typeof defaultConfig;
 
@@ -23,6 +24,7 @@ export interface RowData {
 export interface DateDivider {
   date: Date | string;
   label?: string;
+  config?: ComponentConfig<UDividerConfig>;
 }
 
 export interface Row {

package/ui.form-input-money/UInputMoney.vue

@@ -8,7 +8,7 @@ import UInput from "../ui.form-input/UInput.vue";
 
 import defaultConfig from "./config.ts";
 import useFormatCurrency from "./useFormatCurrency.ts";
-import { COMPONENT_NAME } from "./constants.ts";
+import { COMPONENT_NAME, RAW_DECIMAL_MARK } from "./constants.ts";
 
 import type { Props, Config } from "./types.ts";
 
@@ -52,9 +52,15 @@ const input = computed(() => {
   return moneyInputRef.value?.inputRef || null;
 });
 
-const stringLocalValue = computed(() =>
-  Object.is(localValue.value, -0) ? "-0" : String(localValue.value),
-);
+const stringLocalValue = computed(() => {
+  if (Object.is(localValue.value, -0)) return "-0";
+
+  const fraction = String(rawValue.value).split(RAW_DECIMAL_MARK).at(1) || "";
+
+  return props.valueType === "number" && !Number.isNaN(parseFloat(String(localValue.value)))
+    ? parseFloat(String(localValue.value)).toFixed(fraction.length)
+    : String(localValue.value);
+});
 
 watch(
   () => props.modelValue,

package/ui.form-input-money/constants.ts

@@ -3,3 +3,5 @@
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
  */
 export const COMPONENT_NAME = "UInputMoney";
+
+export const RAW_DECIMAL_MARK = ".";

package/ui.form-input-money/useFormatCurrency.ts

@@ -2,10 +2,11 @@ import { onMounted, nextTick, ref, onBeforeUnmount, toValue, watch, computed, re
 
 import { getRawValue, getFormattedValue } from "./utilFormat.ts";
 
+import { RAW_DECIMAL_MARK } from "./constants.ts";
+
 import type { FormatOptions } from "./types.ts";
 
 const digitSet = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
-const rawDecimalMark = ".";
 const comma = ",";
 const minus = "-";
 
@@ -83,7 +84,7 @@ export default function useFormatCurrency(
 
     const endsWithDecimal = formattedValue.value.endsWith(options.value.decimalSeparator);
 
-    if ((event.key === comma || event.key === rawDecimalMark) && endsWithDecimal) {
+    if ((event.key === comma || event.key === RAW_DECIMAL_MARK) && endsWithDecimal) {
       event.preventDefault();
 
       return;
@@ -120,7 +121,7 @@ export default function useFormatCurrency(
     }
 
     // Replace dot with decimal separator
-    if (eventData === rawDecimalMark || eventData === comma) {
+    if (eventData === RAW_DECIMAL_MARK || eventData === comma) {
       value = [
         ...prevValue.value.slice(0, prevCursorPosition),
         options.value.decimalSeparator,
@@ -145,7 +146,6 @@ export default function useFormatCurrency(
       !options.value.minFractionDigits
     ) {
       formattedValue.value = value;
-
       rawValue.value = newRawValue;
 
       return;
@@ -156,7 +156,7 @@ export default function useFormatCurrency(
     const isDoubleMinus = isMinus && prevValue.value.startsWith(minus);
     const isMinusWithin = newRawValue.includes(minus) && !newRawValue.startsWith(minus);
 
-    const isReservedSymbol = eventData !== rawDecimalMark && eventData !== comma;
+    const isReservedSymbol = eventData !== RAW_DECIMAL_MARK && eventData !== comma;
 
     if (
       (!isNumericValue && isReservedSymbol && !isMinus && eventData.length === 1) ||
@@ -172,7 +172,15 @@ export default function useFormatCurrency(
       return;
     }
 
-    const newFormattedValue = getFormattedValue(newRawValue, options.value);
+    const currentFraction = (newRawValue.split(RAW_DECIMAL_MARK).at(1) || "").slice(
+      0,
+      options.value.maxFractionDigits,
+    );
+
+    const newFormattedValue = getFormattedValue(newRawValue, {
+      ...options.value,
+      minFractionDigits: currentFraction.length,
+    });
 
     if (Number.isNaN(newFormattedValue) || newFormattedValue.includes("NaN")) {
       inputElement.value = prevValue.value;

package/ui.form-input-money/utilFormat.ts

@@ -1,6 +1,6 @@
-import type { FormatOptions } from "./types.ts";
+import { RAW_DECIMAL_MARK } from "./constants.ts";
 
-const rawDecimalMark = ".";
+import type { FormatOptions } from "./types.ts";
 
 export function getRawValue(
   value: string,
@@ -12,7 +12,7 @@ export function getRawValue(
 
   const rawValueWithPrefix = value
     .replaceAll(thousandsSeparator, "")
-    .replace(decimalSeparator, rawDecimalMark);
+    .replace(decimalSeparator, RAW_DECIMAL_MARK);
 
   return rawValueWithPrefix.replace(prefix, "") as Intl.StringNumericLiteral;
 }