vueless 0.0.464 → 0.0.466

package/package.json

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

package/ui.data-table/UTable.vue

@@ -297,7 +297,7 @@ import {
   toggleRowVisibility,
   switchRowCheck,
   getFlatRows,
-  rowsHasId,
+  addRowId,
 } from "./utilTable.js";
 
 import { PX_IN_REM } from "../constants.js";
@@ -565,20 +565,13 @@ watch(isFooterSticky, (newValue) =>
   newValue ? nextTick(setFooterCellWidth) : setFooterCellWidth(null),
 );
 watch(
-  () => selectedRows.value.length,
+  () => selectedRows.value,
   () => {
-    tableRows.value = tableRows.value.map((row) => syncRowCheck(row, selectedRows.value));
+    tableRows.value = tableRows.value
+      .map(addRowId)
+      .map((row) => syncRowCheck(row, selectedRows.value));
   },
-);
-watch(
-  () => props.rows,
-  () => {
-    if (!rowsHasId(props.rows)) {
-      // eslint-disable-next-line no-console
-      console.warn("[Vueless][UTable]: Each table row must have unique id.");
-    }
-  },
-  { deep: true, immediate: true },
+  { deep: true },
 );
 
 onMounted(() => {

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

@@ -405,7 +405,6 @@ CellSlots.args = {
     { key: "tags", label: "tags" },
   ],
   row: {
-    id: getRandomId(),
     link: "some link",
     money: {
       sum: 10,
@@ -418,7 +417,6 @@ CellSlots.args = {
     },
     row: [
       {
-        id: getRandomId(),
         isHidden: false,
         link: "some link",
         money: {
@@ -432,7 +430,6 @@ CellSlots.args = {
         },
       },
       {
-        id: getRandomId(),
         isHidden: false,
         link: "some link",
         money: {

package/ui.data-table/utilTable.js

@@ -1,3 +1,5 @@
+import { getRandomId } from "../utils/utilUI";
+
 export function normalizeColumns(columns) {
   return columns.map((column) => (typeof column === "string" ? { label: column } : column));
 }
@@ -15,13 +17,29 @@ export function getFilteredRow(row, columns) {
 export function syncRowCheck(row, selectedRows) {
   row.isChecked = selectedRows.includes(row.id);
 
-  if (row.row) {
+  if (row.row && !Array.isArray(row.row)) {
     row.row = syncRowCheck(row.row, selectedRows);
   }
 
   return row;
 }
 
+export function addRowId(row) {
+  const hasRowId = typeof row.id !== "undefined" && row.id !== null && row.id !== "";
+
+  row.id = hasRowId ? row.id : getRandomId();
+
+  if (row.row && !Array.isArray(row.row)) {
+    row.row = addRowId(row.row);
+  }
+
+  if (row.row && Array.isArray(row.row)) {
+    row.row = row.row.map((nestedRow) => addRowId(nestedRow));
+  }
+
+  return row;
+}
+
 export function toggleRowVisibility(row, targetRowId) {
   if (row.id === targetRowId) {
     if (Object.hasOwn(row, "isHidden")) {
@@ -73,28 +91,3 @@ export function getFlatRows(tableRows) {
 
   return rows;
 }
-
-export function rowsHasId(rows) {
-  const ids = new Set();
-  let totalRows = 0;
-
-  function addId(row) {
-    totalRows++;
-
-    if (typeof row.id !== "undefined") {
-      ids.add(row.id);
-    }
-
-    if (row.row && !Array.isArray(row.row)) {
-      addId(row.row);
-    }
-
-    if (row.row && Array.isArray(row.row)) {
-      row.row.forEach(addId);
-    }
-  }
-
-  rows.forEach((row) => addId(row));
-
-  return ids.size === totalRows;
-}

package/ui.text-money/UMoney.vue

@@ -12,12 +12,12 @@
         v-text="symbol + currencySpace"
       />
 
-      <span v-if="sum" v-bind="mathSignAttrs" v-text="mathSign" />
+      <span v-if="value" v-bind="mathSignAttrs" v-text="mathSign" />
 
       <span v-bind="integerAttrs" v-text="preparedMoney.integer" />
 
       <span
-        v-if="!integer"
+        v-if="maxFractionDigits > 0"
         v-bind="pennyAttrs"
         v-text="preparedMoney.decimalSeparator + preparedMoney.penny"
       />
@@ -52,7 +52,7 @@ const props = defineProps({
   /**
    * Money value.
    */
-  sum: {
+  value: {
     type: Number,
     default: 0,
   },
@@ -110,11 +110,19 @@ const props = defineProps({
   },
 
   /**
-   * Set the numeral decimal scale after the comma.
+   * Minimal number of signs after the decimal separator (fractional part of a number).
    */
-  decimalScale: {
+  minFractionDigits: {
     type: Number,
-    default: getDefault(defaultConfig, UMoney).decimalScale,
+    default: getDefault(defaultConfig, UMoney).minFractionDigits,
+  },
+
+  /**
+   * Maximal number of signs after the decimal separator (fractional part of a number).
+   */
+  maxFractionDigits: {
+    type: Number,
+    default: getDefault(defaultConfig, UMoney).maxFractionDigits,
   },
 
   /**
@@ -126,20 +134,20 @@ const props = defineProps({
   },
 
   /**
-   * Money align.
-   * @values right, left
+   *  A symbol used to separate the thousand parts of a number.
    */
-  align: {
+  thousandsSeparator: {
     type: String,
-    default: getDefault(defaultConfig, UMoney).align,
+    default: getDefault(defaultConfig, UMoney).thousandsSeparator,
   },
 
   /**
-   * Make money sum integer.
+   * Money align.
+   * @values right, left
    */
-  integer: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UMoney).integer,
+  align: {
+    type: String,
+    default: getDefault(defaultConfig, UMoney).align,
   },
 
   /**
@@ -200,6 +208,12 @@ const mathSign = computed(() => {
 });
 
 const preparedMoney = computed(() => {
-  return separatedMoney(Math.abs(props.sum), props.decimalScale, props.decimalSeparator);
+  return separatedMoney(
+    Math.abs(props.value),
+    props.minFractionDigits,
+    props.maxFractionDigits,
+    props.decimalSeparator,
+    props.thousandsSeparator,
+  );
 });
 </script>

package/ui.text-money/config.js

@@ -53,8 +53,10 @@ export default /*tw*/ {
     sign: "default",
     align: "left",
     symbolAlign: "right",
-    decimalScale: 2,
+    minFractionDigits: 0,
+    maxFractionDigits: 2,
     decimalSeparator: ",",
+    thousandsSeparator: " ",
     planned: false,
     integer: false,
     symbolDivided: true,

package/ui.text-money/storybook/stories.js

@@ -16,7 +16,7 @@ export default {
   title: "Text & Content / Money",
   component: UMoney,
   args: {
-    sum: 10,
+    value: 10,
     symbol: "$",
     sign: "positive",
   },
@@ -73,12 +73,12 @@ export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
 export const OtherValues = DefaultTemplate.bind({});
-OtherValues.args = { sum: 10, symbol: "$", sign: "negative" };
+OtherValues.args = { value: 10, symbol: "$", sign: "negative" };
 
 export const Colors = EnumVariantTemplate.bind({});
 Colors.args = {
   enum: "color",
-  sum: 0,
+  value: 0,
   symbol: "$",
   sign: "default",
 };
@@ -95,11 +95,8 @@ SymbolAlign.args = { enum: "symbolAlign" };
 export const Planned = DefaultTemplate.bind({});
 Planned.args = { planned: true };
 
-export const Integer = DefaultTemplate.bind({});
-Integer.args = { integer: true };
-
-export const NumeralDecimalScale3 = DefaultTemplate.bind({});
-NumeralDecimalScale3.args = { numeralDecimalScale: 3 };
+export const MinFractionDigits3 = DefaultTemplate.bind({});
+MinFractionDigits3.args = { value: 25.67, minFractionDigits: 3, maxFractionDigits: 3 };
 
 export const Align = EnumVariantTemplate.bind({});
 Align.args = { enum: "align" };

package/ui.text-money/utilMoney.js

@@ -8,21 +8,39 @@ export const ADD_SPACE_IN_MONEY_REG_EX = /(\d)(?=(\d{3})+(\D|$))/g;
 export const SINGLE_ZERO = "0";
 export const DOUBLE_ZERO = "00";
 
-export function separatedMoney(money, decimalPlaces = 2, decimalSeparator = ",") {
-  const roundedMoney = money ? money.toFixed(decimalPlaces) : 0;
+export function separatedMoney(
+  money,
+  minFractionDigits = 0,
+  maxFractionDigits = 2,
+  decimalSeparator = ",",
+  thousandsSeparator = " ",
+) {
+  const options = {
+    minimumFractionDigits: minFractionDigits,
+    maximumFractionDigits: maxFractionDigits,
+  };
 
-  let [integer, penny] = String(roundedMoney).split(".");
+  const formattedMoney =
+    money !== undefined && money !== null ? Number(money).toLocaleString("en-US", options) : "0";
 
-  integer = integer.replace(ADD_SPACE_IN_MONEY_REG_EX, "$1 ");
+  let [integer, penny = ""] = formattedMoney.split(".");
 
-  if (!roundedMoney) {
+  integer = integer.replace(/,/g, thousandsSeparator);
+
+  if (!money && money !== 0) {
     integer = SINGLE_ZERO;
     penny = DOUBLE_ZERO;
   }
 
-  if (decimalPlaces === 0) {
+  if (penny === "") {
+    decimalSeparator = "";
+  }
+
+  if (minFractionDigits === 0 && maxFractionDigits === 0) {
     decimalSeparator = "";
     penny = "";
+  } else if (penny.length < minFractionDigits) {
+    penny = penny.padEnd(minFractionDigits, "0");
   }
 
   return { integer, penny, decimalSeparator };

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.464",
+  "version": "0.0.466",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -6745,7 +6745,7 @@
           "description": "",
           "attributes": [
             {
-              "name": "sum",
+              "name": "value",
               "description": "Money value.",
               "value": {
                 "kind": "expression",
@@ -6808,8 +6808,17 @@
               "default": "default"
             },
             {
-              "name": "decimalScale",
-              "description": "Set the numeral decimal scale after the comma.",
+              "name": "minFractionDigits",
+              "description": "Minimal number of signs after the decimal separator (fractional part of a number).",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "0"
+            },
+            {
+              "name": "maxFractionDigits",
+              "description": "Maximal number of signs after the decimal separator (fractional part of a number).",
               "value": {
                 "kind": "expression",
                 "type": "number"
@@ -6826,22 +6835,22 @@
               "default": ","
             },
             {
-              "name": "align",
-              "description": "Money align.",
+              "name": "thousandsSeparator",
+              "description": "A symbol used to separate the thousand parts of a number.",
               "value": {
                 "kind": "expression",
-                "type": "'right' | 'left'"
+                "type": "string"
               },
-              "default": "left"
+              "default": " "
             },
             {
-              "name": "integer",
-              "description": "Make money sum integer.",
+              "name": "align",
+              "description": "Money align.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "'right' | 'left'"
               },
-              "default": "false"
+              "default": "left"
             },
             {
               "name": "planned",