vueless 0.0.672 → 0.0.674

package/composables/useUI.ts

@@ -22,8 +22,8 @@ import type {
   MutatedProps,
   UnknownObject,
   ComponentNames,
-  ComponentConfig,
   NestedComponent,
+  ComponentConfigFull,
   VuelessComponentInstance,
 } from "../types.ts";
 
@@ -45,25 +45,25 @@ export default function useUI<T>(
     ? (parent?.type.__name as ComponentNames)
     : (type.__name as ComponentNames);
 
-  const globalConfig = (vuelessConfig.component?.[componentName] || {}) as ComponentConfig<T>;
+  const globalConfig = (vuelessConfig.component?.[componentName] || {}) as ComponentConfigFull<T>;
 
   const vuelessStrategy = Object.values(STRATEGY_TYPE).includes(vuelessConfig.strategy || "")
     ? (vuelessConfig.strategy as Strategies)
     : (STRATEGY_TYPE.merge as Strategies);
 
   const firstClassKey = Object.keys(defaultConfig || {})[0];
-  const config = ref({}) as Ref<ComponentConfig<T>>;
+  const config = ref({}) as Ref<ComponentConfigFull<T>>;
   const attrs = useAttrs();
 
   watchEffect(() => {
-    const propsConfig = props.config as ComponentConfig<T>;
+    const propsConfig = props.config as ComponentConfigFull<T>;
 
     config.value = getMergedConfig({
       defaultConfig,
       globalConfig,
       propsConfig,
       vuelessStrategy,
-    }) as ComponentConfig<T>;
+    }) as ComponentConfigFull<T>;
   });
 
   /**
@@ -73,7 +73,7 @@ export default function useUI<T>(
     return computed(() => {
       const mutatedPropsValue = toValue(mutatedProps);
       const color = (toValue(mutatedProps || {}).color || props.color) as BrandColors;
-      const value = (config.value as ComponentConfig<T>)[key];
+      const value = (config.value as ComponentConfigFull<T>)[key];
 
       let classes = "";
 
@@ -203,7 +203,7 @@ export default function useUI<T>(
     function getExtendsKeyConfig(configKey: string) {
       let extendsKeyConfig: NestedComponent = {};
 
-      const propsConfig = props.config as ComponentConfig<T>;
+      const propsConfig = props.config as ComponentConfigFull<T>;
       const extendsKeys = getExtendsKeys(config.value[configKey]);
 
       if (extendsKeys.length) {

package/constants.js

@@ -119,6 +119,7 @@ export const COMPONENTS = {
   UFiles: "ui.text-files",
   UEmpty: "ui.text-empty",
   UBadge: "ui.text-badge",
+  UNumber: "ui.text-number",
 
   /* Containers */
   UDivider: "ui.container-divider",

package/package.json

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

package/types.ts

@@ -6,6 +6,7 @@ import UFilesDefaultConfig from "./ui.text-files/config.ts";
 import UMoneyDefaultConfig from "./ui.text-money/config.ts";
 import UHeaderDefaultConfig from "./ui.text-header/config.ts";
 import UNotifyDefaultConfig from "./ui.text-notify/config.ts";
+import UNumberDefaultConfig from "./ui.text-number/config.ts";
 import UDotDefaultConfig from "./ui.other-dot/config.ts";
 import UButtonDefaultConfig from "./ui.button/config.ts";
 import ULinkDefaultConfig from "./ui.button-link/config.ts";
@@ -194,6 +195,7 @@ export interface Components {
   UMoney: Partial<typeof UMoneyDefaultConfig>;
   UHeader: Partial<typeof UHeaderDefaultConfig>;
   UNotify: Partial<typeof UNotifyDefaultConfig>;
+  UNumber: Partial<typeof UNumberDefaultConfig>;
   UDot: Partial<typeof UDotDefaultConfig>;
   UButton: Partial<typeof UButtonDefaultConfig>;
   ULink: Partial<typeof ULinkDefaultConfig>;
@@ -255,8 +257,9 @@ export type ComponentConfig<T> = Partial<{
         ? T[K]
         : T[K] | string | UnknownObject
     : never;
-}> &
-  NestedComponent;
+}> & { [key: string]: unknown };
+
+export type ComponentConfigFull<T> = ComponentConfig<T> & NestedComponent;
 
 export interface NestedComponent {
   base?: string;

package/ui.dropdown-list/UDropdownList.vue

@@ -270,6 +270,7 @@ const {
     tabindex="1"
     :style="{ maxHeight: wrapperMaxHeight }"
     v-bind="wrapperAttrs"
+    :data-test="`${dataTest}-list`"
     @keydown.self.down.prevent="pointerForward"
     @keydown.self.up.prevent="pointerBackward"
     @keydown.enter.stop.self="addPointerElement('Enter')"
@@ -288,6 +289,7 @@ const {
         <span
           v-if="!(option && (option.groupLabel || option.isSubGroup)) && !option.isHidden"
           v-bind="isSelectedOption(option) ? optionActiveAttrs : optionAttrs"
+          :data-test="`${dataTest}-option`"
           :class="optionHighlight(index, option)"
           @click="select(option), onClickOption(option)"
           @mouseenter.self="pointerSet(index)"
@@ -353,6 +355,7 @@ const {
           ref="add-option"
           role="option"
           v-bind="addOptionLabelWrapperAttrs"
+          :data-test="`${dataTest}-add`"
           @click="onClickAddOption"
           @mouseenter.self="pointerSet(options.length + 1)"
         >
@@ -362,7 +365,13 @@ const {
           </span>
         </li>
 
-        <UButton round square v-bind="addOptionButtonAttrs" @click="onClickAddOption">
+        <UButton
+          round
+          square
+          v-bind="addOptionButtonAttrs"
+          :data-test="`${dataTest}-add-button`"
+          @click="onClickAddOption"
+        >
           <UIcon
             internal
             color="white"

package/ui.form-label/ULabel.vue

@@ -80,9 +80,10 @@ const { wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs } = useUI<Confi
     v-if="isHorizontalPlacement || isTopWithDescPlacement"
     ref="wrapperRef"
     v-bind="wrapperAttrs"
+    :data-test="dataTest"
     @click="onClick"
   >
-    <div v-bind="contentAttrs">
+    <div v-bind="contentAttrs" :data-test="`${dataTest}-content`">
       <!-- @slot Use it to add label content. -->
       <slot />
     </div>
@@ -136,7 +137,7 @@ const { wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs } = useUI<Confi
       </slot>
     </label>
 
-    <div v-bind="contentAttrs">
+    <div v-bind="contentAttrs" :data-test="`${dataTest}-content`">
       <!-- @slot Use it to add label content. -->
       <slot />
     </div>

package/ui.form-select/USelect.vue

@@ -517,6 +517,7 @@ const {
             color="gray"
             :name="config.defaults.dropdownIcon"
             v-bind="toggleIconAttrs"
+            :data-test="`${dataTest}-toggle`"
             :tabindex="-1"
           />
         </slot>
@@ -538,6 +539,7 @@ const {
             color="gray"
             :name="config.defaults.clearIcon"
             v-bind="clearIconAttrs"
+            :data-test="`${dataTest}-clear`"
           />
         </slot>
       </div>
@@ -612,6 +614,7 @@ const {
                   color="gray"
                   :name="config.defaults.clearMultipleIcon"
                   v-bind="clearMultipleIconAttrs"
+                  :data-test="`${dataTest}-clear-all`"
                 />
               </slot>
             </div>
@@ -631,6 +634,7 @@ const {
             :disabled="disabled"
             :aria-controls="'listbox-' + elementId"
             v-bind="searchInputAttrs"
+            :data-test="`${dataTest}-search`"
             @focus="activate"
             @blur.prevent="deactivate"
             @keyup.esc="deactivate"
@@ -689,6 +693,7 @@ const {
         :add-option="addOption"
         tabindex="-1"
         v-bind="dropdownListAttrs as KeyAttrsWithConfig<UDropdownListConfig>"
+        :data-test="dataTest"
         @add="onAddOption"
         @focus="activate"
         @mousedown.prevent.capture

package/ui.other-theme-color-toggle/config.ts

@@ -7,7 +7,8 @@ export default /*tw*/ {
         {
           filled: true,
           variant: "thirdary",
-          class: "!bg-gray-800/10 dark:!bg-gray-200/10",
+          color: "grayscale",
+          class: "bg-gray-800/10 dark:bg-gray-200/10",
         },
       ],
     },

package/ui.text-badge/storybook/stories.ts

@@ -19,7 +19,7 @@ interface UBadgeArgs extends Props {
 }
 
 export default {
-  id: "4090",
+  id: "4095",
   title: "Text & Content / Badge",
   component: UBadge,
   args: {

package/ui.text-empty/storybook/stories.ts

@@ -19,7 +19,7 @@ interface UEmptyArgs extends Props {
 }
 
 export default {
-  id: "4080",
+  id: "4090",
   title: "Text & Content / Empty",
   component: UEmpty,
   args: {

package/ui.text-file/storybook/stories.ts

@@ -15,7 +15,7 @@ interface UFileArgs extends Props {
 }
 
 export default {
-  id: "4050",
+  id: "4070",
   title: "Text & Content / File",
   component: UFile,
   args: {

package/ui.text-files/storybook/stories.ts

@@ -15,7 +15,7 @@ interface UFilesArgs extends Props {
 }
 
 export default {
-  id: "4060",
+  id: "4080",
   title: "Text & Content / Files",
   component: UFiles,
   args: {

package/ui.text-money/UMoney.vue

@@ -3,11 +3,11 @@ import { computed } from "vue";
 
 import useUI from "../composables/useUI.ts";
 import { getDefaults } from "../utils/ui.ts";
-import { hasSlotContent } from "../utils/helper.ts";
 
 import { COMPONENT_NAME } from "./constants.ts";
 import defaultConfig from "./config.ts";
-import { separatedMoney, MONEY_SIGN_TYPE, MATH_SIGN } from "./utilMoney.ts";
+
+import UNumber from "../ui.text-number/UNumber.vue";
 
 import type { Props, Config } from "./types.ts";
 
@@ -24,81 +24,37 @@ const currencySymbolPosition = computed(() => {
   };
 });
 
-const currencySpace = computed(() => {
-  return props.symbolDivided ? " " : "";
-});
-
-const mathSign = computed(() => {
-  let type = "";
-
-  if (props.sign === MONEY_SIGN_TYPE.unsigned) type = "";
-  if (props.sign === MONEY_SIGN_TYPE.positive) type = MATH_SIGN.PLUS;
-  if (props.sign === MONEY_SIGN_TYPE.negative) type = MATH_SIGN.MINUS;
-  if (props.sign === MONEY_SIGN_TYPE.auto && props.value < 0) type = MATH_SIGN.MINUS;
-
-  return type;
-});
-
-const preparedMoney = computed(() => {
-  return separatedMoney(
-    Math.abs(props.value || 0),
-    props.minFractionDigits,
-    props.maxFractionDigits,
-    props.decimalSeparator,
-    props.thousandsSeparator,
-  );
-});
-
 /**
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-const {
-  moneyAttrs,
-  sumAttrs,
-  mathSignAttrs,
-  integerAttrs,
-  pennyAttrs,
-  slotLeftAttrs,
-  symbolAttrs,
-  slotRightAttrs,
-} = useUI<Config>(defaultConfig);
+const { moneyNumberAttrs, symbolAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>
-  <div v-bind="moneyAttrs">
-    <div v-if="hasSlotContent($slots['left'])" v-bind="slotLeftAttrs">
+  <UNumber
+    :value="value"
+    :size="size"
+    :color="color"
+    :sign="sign"
+    :align="align"
+    :min-fraction-digits="minFractionDigits"
+    :max-fraction-digits="maxFractionDigits"
+    :decimal-separator="decimalSeparator"
+    :thousands-separator="thousandsSeparator"
+    v-bind="moneyNumberAttrs"
+    :data-test="dataTest"
+  >
+    <template #left>
       <!-- @slot Use it to add something before money amount. -->
       <slot name="left" />
-    </div>
-
-    <div v-bind="sumAttrs" :data-test="dataTest">
-      <span
-        v-if="currencySymbolPosition.left && symbol"
-        v-bind="symbolAttrs"
-        v-text="symbol + currencySpace"
-      />
-
-      <span v-if="value" v-bind="mathSignAttrs" v-text="mathSign" />
-
-      <span v-bind="integerAttrs" v-text="preparedMoney.integer" />
-
-      <span
-        v-if="maxFractionDigits > 0"
-        v-bind="pennyAttrs"
-        v-text="preparedMoney.decimalSeparator + preparedMoney.penny"
-      />
-
-      <span
-        v-if="currencySymbolPosition.right && symbol"
-        v-bind="symbolAttrs"
-        v-text="currencySpace + symbol"
-      />
-    </div>
+      <span v-if="currencySymbolPosition.left && symbol" v-bind="symbolAttrs" v-text="symbol" />
+    </template>
 
-    <div v-if="hasSlotContent($slots['right'])" v-bind="slotRightAttrs">
+    <template #right>
+      <span v-if="currencySymbolPosition.right && symbol" v-bind="symbolAttrs" v-text="symbol" />
       <!-- @slot Use it to add something after money amount. -->
       <slot name="right" />
-    </div>
-  </div>
+    </template>
+  </UNumber>
 </template>

package/ui.text-money/config.ts

@@ -1,20 +1,14 @@
 export default /*tw*/ {
-  money: {
-    base: "whitespace-nowrap flex items-center text-{color}-600",
+  moneyNumber: {
+    base: "{UNumber}",
     variants: {
-      color: {
-        white: "text-white",
-        grayscale: "text-gray-900",
-      },
-      align: {
-        left: "justify-start",
-        right: "justify-end",
+      planned: {
+        true: "opacity-75 before:content-['('] after:content-[')']",
       },
     },
   },
-  slotLeft: "mr-2",
-  slotRight: "ml-2",
-  sum: {
+  symbol: {
+    base: "text-{color}-600 mx-1",
     variants: {
       size: {
         xs: "text-xs",
@@ -26,27 +20,13 @@ export default /*tw*/ {
         "3xl": "text-3xl",
         "4xl": "text-4xl",
       },
-      planned: {
-        true: "opacity-75 before:content-['('] after:content-[')']",
-      },
-    },
-  },
-  symbol: "",
-  mathSign: "",
-  integer: "",
-  penny: {
-    variants: {
-      size: {
-        xs: "text-2xs",
-        sm: "text-xs",
-        md: "text-sm",
-        lg: "text-base",
-        xl: "text-lg",
-        "2xl": "text-xl",
-        "3xl": "text-2xl",
-        "4xl": "text-3xl",
-      },
     },
+    compoundVariants: [
+      { symbolDivided: false, symbolAlign: "left", class: "mr-0" },
+      { symbolDivided: false, symbolAlign: "right", class: "ml-0" },
+      { planned: true, symbolAlign: "left", class: "ml-0" },
+      { planned: true, symbolAlign: "right", class: "mr-0" },
+    ],
   },
   defaults: {
     color: "grayscale",

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

@@ -8,6 +8,9 @@ import {
 import UMoney from "../../ui.text-money/UMoney.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import URow from "../../ui.container-row/URow.vue";
+import UText from "../../ui.text-block/UText.vue";
+import UDivider from "../../ui.container-divider/UDivider.vue";
+
 import DebitIcon from "../../ui.text-money/assets/debit.svg?component";
 import CreditIcon from "../../ui.text-money/assets/credit.svg?component";
 
@@ -16,17 +19,15 @@ import type { Props } from "../types.ts";
 
 interface UMoneyArgs extends Props {
   slotTemplate?: string;
-  enum: "color" | "size" | "sign" | "symbolAlign" | "align";
+  enum: "color" | "size" | "sign" | "symbolAlign";
 }
 
-const COMPONENT_CLASSES = "flex justify-center w-1/6";
-
 export default {
-  id: "4040",
+  id: "4060",
   title: "Text & Content / Money",
   component: UMoney,
   args: {
-    value: 10,
+    value: -14.24,
     symbol: "$",
     sign: "auto",
   },
@@ -45,24 +46,17 @@ const DefaultTemplate: StoryFn<UMoneyArgs> = (args: UMoneyArgs) => ({
   setup() {
     const slots = getSlotNames(UMoney.__name);
 
-    const icons = {
-      Debit: DebitIcon,
-      Credit: CreditIcon,
-    };
-
-    return { args, slots, icons };
+    return { args, slots };
   },
   template: `
-    <div class="${COMPONENT_CLASSES}">
-      <UMoney v-bind="args">
-        ${args.slotTemplate || getSlotsFragment("")}
-      </UMoney>
-    </div>
+    <UMoney v-bind="args">
+      ${args.slotTemplate || getSlotsFragment("")}
+    </UMoney>
   `,
 });
 
 const EnumVariantTemplate: StoryFn<UMoneyArgs> = (args: UMoneyArgs, { argTypes }) => ({
-  components: { UMoney, URow },
+  components: { UMoney, URow, UText, UDivider },
   setup() {
     const slots = getSlotNames(UMoney.__name);
 
@@ -74,29 +68,26 @@ const EnumVariantTemplate: StoryFn<UMoneyArgs> = (args: UMoneyArgs, { argTypes }
   },
   template: `
     <URow>
-      <div class="${COMPONENT_CLASSES}" v-for="(option, index) in options" :key="index">
-        <UMoney v-bind="args" :[args.enum]="option" />
-      </div>
+      <UMoney
+        v-for="(option, index) in options"
+        :key="index"
+        v-bind="args"
+        :[args.enum]="option"
+      >
+        <template #right v-if="args.enum === 'sign'">
+          <UText size="lg" class="ml-1">{{ option }}</UText>
+          <UDivider vertical variant="dark" class="h-5" />
+        </template>
+      </UMoney>
     </URow>
   `,
-  created() {
-    this.mxArgTypes = argTypes;
-  },
 });
 
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const OtherValues = DefaultTemplate.bind({});
-OtherValues.args = { value: 10, symbol: "$", sign: "negative" };
-
 export const Colors = EnumVariantTemplate.bind({});
-Colors.args = {
-  enum: "color",
-  value: 0,
-  symbol: "$",
-  sign: "auto",
-};
+Colors.args = { enum: "color" };
 
 export const Sizes = EnumVariantTemplate.bind({});
 Sizes.args = { enum: "size" };
@@ -110,26 +101,32 @@ SymbolAlign.args = { enum: "symbolAlign" };
 export const Planned = DefaultTemplate.bind({});
 Planned.args = { planned: true };
 
-export const MinFractionDigits3 = DefaultTemplate.bind({});
-MinFractionDigits3.args = { value: 25.67, minFractionDigits: 3, maxFractionDigits: 3 };
+export const MinFractionDigits4 = DefaultTemplate.bind({});
+MinFractionDigits4.args = { minFractionDigits: 4, maxFractionDigits: 4 };
+
+export const Slots: StoryFn<UMoneyArgs> = (args) => ({
+  components: { UMoney, UIcon, URow },
+  setup() {
+    const icons = {
+      Debit: DebitIcon,
+      Credit: CreditIcon,
+    };
 
-export const Align = EnumVariantTemplate.bind({});
-Align.args = { enum: "align" };
+    return { args, icons };
+  },
+  template: `
+    <URow>
+      <UMoney v-bind="args">
+        <template #left>
+          <UIcon :src="icons.Debit" size="3xs" />
+        </template>
+      </UMoney>
 
-export const SlotLeft = DefaultTemplate.bind({});
-SlotLeft.args = {
-  slotTemplate: `
-    <template #left>
-      <UIcon :src="icons.Debit" size="3xs" />
-    </template>
-  `,
-};
-
-export const SlotRight = DefaultTemplate.bind({});
-SlotRight.args = {
-  slotTemplate: `
-    <template #right>
-      <UIcon :src="icons.Credit" size="3xs" />
-    </template>
+      <UMoney v-bind="args">
+        <template #right>
+          <UIcon :src="icons.Credit" size="3xs" />
+        </template>
+      </UMoney>
+    </URow>
   `,
-};
+});

package/ui.text-money/types.ts

@@ -7,7 +7,7 @@ export interface Props {
   /**
    * Money value.
    */
-  value?: number;
+  value?: number | string;
 
   /**
    * Money size.

package/ui.text-notify/storybook/stories.ts

@@ -20,7 +20,7 @@ interface UNotifyArgs extends Props {
 }
 
 export default {
-  id: "4035",
+  id: "4040",
   title: "Text & Content / Notify",
   component: UNotify,
   argTypes: {

package/ui.text-number/UNumber.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
+
+import { COMPONENT_NAME } from "./constants.ts";
+import defaultConfig from "./config.ts";
+import { separatedNumber, MATH_SIGN_TYPE, MATH_SIGN } from "./utilNumber.ts";
+
+import type { Props, Config } from "./types.ts";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+});
+
+const numericValue = computed(() => {
+  if (typeof props.value === "string") {
+    return parseFloat(props.value);
+  }
+
+  return props.value;
+});
+
+const mathSign = computed(() => {
+  let type = "";
+
+  if (props.sign === MATH_SIGN_TYPE.unsigned) type = "";
+  if (props.sign === MATH_SIGN_TYPE.positive) type = MATH_SIGN.PLUS;
+  if (props.sign === MATH_SIGN_TYPE.negative) type = MATH_SIGN.MINUS;
+  if (props.sign === MATH_SIGN_TYPE.auto && numericValue.value < 0) type = MATH_SIGN.MINUS;
+
+  return type;
+});
+
+const preparedNumber = computed(() => {
+  return separatedNumber(
+    Math.abs(numericValue.value || 0),
+    props.minFractionDigits,
+    props.maxFractionDigits,
+    props.decimalSeparator,
+    props.thousandsSeparator,
+  );
+});
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const { numberAttrs, sumAttrs, mathSignAttrs, integerAttrs, decimalAttrs } =
+  useUI<Config>(defaultConfig);
+</script>
+
+<template>
+  <div v-bind="numberAttrs">
+    <!-- @slot Use it to add something before the number. -->
+    <slot name="left" />
+
+    <div v-bind="sumAttrs" :data-test="dataTest">
+      <span v-if="value" v-bind="mathSignAttrs" v-text="mathSign" />
+
+      <span v-bind="integerAttrs" v-text="preparedNumber.integer" />
+
+      <span
+        v-if="maxFractionDigits > 0"
+        v-bind="decimalAttrs"
+        v-text="preparedNumber.decimalSeparator + preparedNumber.decimal"
+      />
+    </div>
+
+    <!-- @slot Use it to add something after the number. -->
+    <slot name="right" />
+  </div>
+</template>

package/ui.text-number/config.ts

@@ -0,0 +1,42 @@
+export default /*tw*/ {
+  number: {
+    base: "whitespace-nowrap flex items-center text-{color}-600",
+    variants: {
+      color: {
+        white: "text-white",
+        grayscale: "text-gray-900",
+      },
+      align: {
+        left: "justify-start",
+        right: "justify-end",
+      },
+    },
+  },
+  sum: {
+    variants: {
+      size: {
+        xs: "text-xs",
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg",
+        xl: "text-xl",
+        "2xl": "text-2xl",
+        "3xl": "text-3xl",
+        "4xl": "text-4xl",
+      },
+    },
+  },
+  mathSign: "",
+  integer: "",
+  decimal: "",
+  defaults: {
+    color: "grayscale",
+    size: "md",
+    sign: "auto",
+    align: "left",
+    minFractionDigits: 0,
+    maxFractionDigits: 2,
+    decimalSeparator: ",",
+    thousandsSeparator: " ",
+  },
+};

package/ui.text-number/constants.ts

@@ -0,0 +1,5 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const COMPONENT_NAME = "UNumber";

package/ui.text-number/storybook/docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../../utils/storybook.ts";
+
+import * as stories from "./stories.ts";
+import defaultConfig from "../config.ts?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.text-number/storybook/stories.ts

@@ -0,0 +1,105 @@
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/storybook.ts";
+
+import UNumber from "../../ui.text-number/UNumber.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+import URow from "../../ui.container-row/URow.vue";
+import UText from "../../ui.text-block/UText.vue";
+import UBadge from "../../ui.text-badge/UBadge.vue";
+import UDivider from "../../ui.container-divider/UDivider.vue";
+
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { Props } from "../types.ts";
+
+interface UNumberArgs extends Props {
+  slotTemplate?: string;
+  enum: "color" | "size" | "sign";
+}
+
+export default {
+  id: "4050",
+  title: "Text & Content / Number",
+  component: UNumber,
+  args: {
+    value: -14.24,
+    sign: "auto",
+  },
+  argTypes: {
+    ...getArgTypes(UNumber.__name),
+  },
+} as Meta;
+
+const DefaultTemplate: StoryFn<UNumberArgs> = (args: UNumberArgs) => ({
+  components: { UNumber, UIcon, UBadge },
+  setup() {
+    const slots = getSlotNames(UNumber.__name);
+
+    return { args, slots };
+  },
+  template: `
+    <UNumber v-bind="args">
+      ${args.slotTemplate || getSlotsFragment("")}
+    </UNumber>
+  `,
+});
+
+const EnumVariantTemplate: StoryFn<UNumberArgs> = (args: UNumberArgs, { argTypes }) => ({
+  components: { UNumber, URow, UText, UDivider },
+  setup() {
+    return { args, options: argTypes?.[args.enum]?.options };
+  },
+  template: `
+    <URow>
+      <UNumber
+        v-for="(option, index) in options"
+        :key="index"
+        v-bind="args"
+        :[args.enum]="option"
+      >
+        <template #right v-if="args.enum === 'sign'">
+          <UText size="lg" class="ml-1">{{ option }}</UText>
+          <UDivider vertical variant="dark" class="h-5" />
+        </template>
+      </UNumber>
+    </URow>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const Colors = EnumVariantTemplate.bind({});
+Colors.args = {
+  enum: "color",
+  sign: "auto",
+};
+
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size" };
+
+export const Sign = EnumVariantTemplate.bind({});
+Sign.args = { enum: "sign" };
+
+export const MinFractionDigits4 = DefaultTemplate.bind({});
+MinFractionDigits4.args = { minFractionDigits: 4, maxFractionDigits: 4 };
+
+export const Slots: StoryFn<UNumberArgs> = (args) => ({
+  components: { UNumber, UIcon, URow, UBadge },
+  setup() {
+    return { args };
+  },
+  template: `
+    <URow>
+      <UNumber v-bind="args">
+        <template #left>
+          <UIcon name="confirmation_number" color="green" />
+        </template>
+      </UNumber>
+
+      <UNumber v-bind="args">
+        <template #right>
+          <UBadge label="Quantity" color="green" />
+        </template>
+      </UNumber>
+    </URow>
+  `,
+});

package/ui.text-number/types.ts

@@ -0,0 +1,82 @@
+import defaultConfig from "./config.ts";
+import type { ComponentConfig } from "../types.ts";
+
+export type Config = typeof defaultConfig;
+
+export interface Props {
+  /**
+   * Number value.
+   */
+  value?: number | string;
+
+  /**
+   * Number size.
+   */
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
+
+  /**
+   * Number color.
+   */
+  color?:
+    | "grayscale"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose"
+    | "gray"
+    | "white"
+    | "brand";
+
+  /**
+   * Number sign.
+   */
+  sign?: "auto" | "positive" | "negative" | "unsigned";
+
+  /**
+   * Minimal number of signs after the decimal separator (fractional part of a number).
+   */
+  minFractionDigits?: number;
+
+  /**
+   * Maximal number of signs after the decimal separator (fractional part of a number).
+   */
+  maxFractionDigits?: number;
+
+  /**
+   * A symbol used to separate the integer part from the fractional part of a number.
+   */
+  decimalSeparator?: string;
+
+  /**
+   *  A symbol used to separate the thousand parts of a number.
+   */
+  thousandsSeparator?: string;
+
+  /**
+   * Number align.
+   */
+  align?: "right" | "left";
+
+  /**
+   * Component config object.
+   */
+  config?: ComponentConfig<Config>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/{ui.text-money/utilMoney.ts → ui.text-number/utilNumber.ts}

@@ -1,4 +1,4 @@
-export const MONEY_SIGN_TYPE = {
+export const MATH_SIGN_TYPE = {
   auto: "auto",
   positive: "positive",
   negative: "negative",
@@ -10,12 +10,11 @@ export const MATH_SIGN = {
   MINUS: "-",
 };
 
-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: number,
+export function separatedNumber(
+  value: number,
   minFractionDigits = 0,
   maxFractionDigits = 2,
   decimalSeparator = ",",
@@ -26,28 +25,28 @@ export function separatedMoney(
     maximumFractionDigits: Number(maxFractionDigits),
   };
 
-  const formattedMoney =
-    money !== undefined && money !== null ? Number(money).toLocaleString("en-US", options) : "0";
+  const formattedNumber =
+    value !== undefined && value !== null ? Number(value).toLocaleString("en-US", options) : "0";
 
-  let [integer, penny = ""] = formattedMoney.split(".");
+  let [integer, decimal = ""] = formattedNumber.split(".");
 
   integer = integer.replace(/,/g, thousandsSeparator);
 
-  if (!money && money !== 0) {
+  if (!value && value !== 0) {
     integer = SINGLE_ZERO;
-    penny = DOUBLE_ZERO;
+    decimal = DOUBLE_ZERO;
   }
 
-  if (penny === "") {
+  if (decimal === "") {
     decimalSeparator = "";
   }
 
   if (minFractionDigits === 0 && maxFractionDigits === 0) {
     decimalSeparator = "";
-    penny = "";
-  } else if (penny.length < minFractionDigits) {
-    penny = penny.padEnd(minFractionDigits, "0");
+    decimal = "";
+  } else if (decimal.length < minFractionDigits) {
+    decimal = decimal.padEnd(minFractionDigits, "0");
   }
 
-  return { integer, penny, decimalSeparator };
+  return { integer, decimal, decimalSeparator };
 }