vueless 0.0.463 → 0.0.465

package/package.json

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

package/ui.loader-progress/ULoaderProgress.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-import { computed, onBeforeUnmount, watch, ref, onMounted, onUnmounted } from "vue";
+import { computed, onBeforeUnmount, watch, ref, onMounted, onUnmounted, watchEffect } from "vue";
 
 import { getDefault } from "../utils/utilUI.js";
 import { isMobileApp } from "../utils/utilPlatform.js";
@@ -35,6 +35,14 @@ const props = defineProps({
     type: [String, Array],
     default: "",
   },
+
+  /**
+   * Loader state (shown / hidden).
+   */
+  loading: {
+    type: Boolean,
+    default: getDefault(defaultConfig, ULoaderProgress).loading,
+  },
 });
 
 const error = ref(false);
@@ -85,6 +93,17 @@ onUnmounted(() => {
   window.removeEventListener("loaderProgressOff", setLoaderOffHandler);
 });
 
+watchEffect(() => {
+  if (props.loading) {
+    show.value = true;
+    start();
+
+    return;
+  }
+
+  done();
+});
+
 function setLoaderOnHandler(event) {
   loaderProgressOn(event.detail.resource);
 }
@@ -113,7 +132,7 @@ function onChangeRequestsQueue() {
 
     if (isActiveRequests && !isStarted.value) {
       start();
-    } else if (!isActiveRequests && isStarted.value && show.value) {
+    } else if (!isActiveRequests && isStarted.value && show.value && !props.loading) {
       done();
     }
   } else {

package/ui.loader-progress/config.js

@@ -13,6 +13,7 @@ export default /*tw*/ {
   },
   defaults: {
     color: "brand",
+    loading: false,
   },
   safelist: (colors) => [{ pattern: `bg-(${colors})-600` }],
 };

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.463",
+  "version": "0.0.465",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -6303,6 +6303,15 @@
                 "type": "string|array"
               },
               "default": "\"\""
+            },
+            {
+              "name": "loading",
+              "description": "Loader state (shown / hidden).",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
             }
           ],
           "source": {
@@ -6736,7 +6745,7 @@
           "description": "",
           "attributes": [
             {
-              "name": "sum",
+              "name": "value",
               "description": "Money value.",
               "value": {
                 "kind": "expression",
@@ -6799,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"
@@ -6817,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",