vueless 0.0.673 → 0.0.675

package/bin/commands/create.js

@@ -0,0 +1,77 @@
+/* eslint-disable no-console */
+import { existsSync } from "node:fs";
+import path from "node:path";
+import { cwd } from "node:process";
+import { cp, readFile, writeFile, rename } from "node:fs/promises";
+import { styleText } from "node:util";
+
+import { getDirFiles } from "../../utils/node/helper.js";
+import { replaceRelativeImports } from "../utils/formatUtil.js";
+import { getLastStorybookId } from "../utils/dataUtils.js";
+
+import { SRC_COMPONENTS_PATH, COMPONENTS_PATH } from "../constants.js";
+
+import { COMPONENTS, VUELESS_DIR, VUELESS_LOCAL_DIR } from "../../constants.js";
+
+const boilerplateName = "UBoilerplate";
+const boilerplatePath = path.join(cwd(), VUELESS_DIR, "ui.boilerplate");
+
+export async function createVuelessComponent(options) {
+  const [componentName] = options;
+
+  if (!componentName) {
+    throw new Error("Component name is required");
+  }
+
+  const isSrcDir = existsSync(path.join(cwd(), VUELESS_LOCAL_DIR));
+  const destPath = isSrcDir
+    ? path.join(cwd(), SRC_COMPONENTS_PATH, componentName)
+    : path.join(cwd(), COMPONENTS_PATH, componentName);
+
+  const isComponentExists = componentName in COMPONENTS || existsSync(destPath);
+
+  if (isComponentExists) {
+    throw new Error(`Component with name ${componentName} alrady exists`);
+  }
+
+  await cp(boilerplatePath, destPath, { recursive: true });
+
+  await modifyCreatedComponent(destPath, componentName);
+
+  const successMessage = styleText(
+    "green",
+    `Success: ${componentName} was created in ${destPath} directory`,
+  );
+
+  console.log(successMessage);
+}
+
+async function modifyCreatedComponent(destPath, componentName) {
+  const destFiles = await getDirFiles(destPath, "");
+  const lastStorybookId = await getLastStorybookId();
+
+  for await (const filePath of destFiles) {
+    const fileContent = await readFile(filePath, "utf-8");
+
+    let updatedContent = replaceRelativeImports(componentName, filePath, fileContent);
+    let targetPath = filePath;
+
+    if (filePath.endsWith("constants.ts")) {
+      updatedContent = updatedContent.replace(boilerplateName, componentName);
+    }
+
+    if (filePath.endsWith("stories.ts")) {
+      updatedContent = updatedContent
+        .replaceAll(boilerplateName, componentName)
+        .replace("{{component_id}}", String(lastStorybookId + 10));
+    }
+
+    if (targetPath.endsWith(`${boilerplateName}.vue`)) {
+      targetPath = targetPath.replace(boilerplateName, componentName);
+
+      await rename(filePath, targetPath);
+    }
+
+    await writeFile(targetPath, updatedContent);
+  }
+}

package/bin/commands/index.js

@@ -1,5 +1,7 @@
 import { vuelssInit } from "./init.js";
+import { createVuelessComponent } from "./create.js";
 
 export const commands = {
   init: vuelssInit,
+  create: createVuelessComponent,
 };

package/bin/commands/init.js

@@ -5,14 +5,10 @@ import path from "node:path";
 import { writeFile } from "node:fs/promises";
 import { styleText } from "node:util";
 
-import {
-  DEFAULT_VUELESS_CONFIG_NAME,
-  DEFAULT_VUELESS_CONFIG_CONTNET,
-  TYPESCRIPT_EXT,
-  JAVASCRIPT_EXT,
-} from "../constants.js";
-
-const destPath = path.join(cwd(), DEFAULT_VUELESS_CONFIG_NAME);
+import { DEFAULT_VUELESS_CONFIG_CONTNET } from "../constants.js";
+import { JAVASCRIPT_EXT, TYPESCRIPT_EXT, VUELESS_CONFIG_FILE_NAME } from "../../constants.js";
+
+const destPath = path.join(cwd(), VUELESS_CONFIG_FILE_NAME);
 
 const vuelessInitOptions = ["--ts", "--js"];
 

package/bin/constants.js

@@ -1,8 +1,5 @@
-export const DEFAULT_VUELESS_CONFIG_NAME = "vueless.config.js";
-export const DEFAULT_EXIT_CODE = 0;
-export const FAILURE_CODE = 1;
-export const TYPESCRIPT_EXT = ".ts";
-export const JAVASCRIPT_EXT = ".js";
+export const SRC_COMPONENTS_PATH = "/src/components";
+export const COMPONENTS_PATH = "/components";
 export const DEFAULT_VUELESS_CONFIG_CONTNET = `
 export default {
   /**

package/bin/index.js

@@ -4,7 +4,7 @@
 
 import { commands } from "./commands/index.js";
 
-import { DEFAULT_EXIT_CODE, FAILURE_CODE } from "./constants.js";
+import { DEFAULT_EXIT_CODE, FAILURE_CODE } from "../constants.js";
 
 const [command, ...options] = process.argv.slice(2);
 

package/bin/utils/dataUtils.js

@@ -0,0 +1,53 @@
+import { existsSync } from "node:fs";
+import { cwd } from "node:process";
+import path from "node:path";
+import { readFile } from "node:fs/promises";
+
+import { getDirFiles } from "../../utils/node/helper.js";
+
+import { SRC_COMPONENTS_PATH, COMPONENTS_PATH } from "../constants.js";
+import { VUELESS_DIR } from "../../constants.js";
+
+const storiesName = "stories.ts";
+
+export async function getLastStorybookId() {
+  const srcComponentsDir = path.join(cwd(), SRC_COMPONENTS_PATH);
+  const componentsDir = path.join(cwd(), COMPONENTS_PATH);
+  const vuelessPackagePath = path.join(cwd(), VUELESS_DIR);
+  const isSrcComponentsDir = existsSync(srcComponentsDir);
+  const isComponentsDir = existsSync(componentsDir);
+
+  const stories = await getDirFiles(vuelessPackagePath, storiesName);
+
+  if (isSrcComponentsDir) {
+    const srcComponentsDirStories = await getDirFiles(srcComponentsDir, storiesName);
+
+    stories.push(...srcComponentsDirStories);
+  }
+
+  if (isComponentsDir) {
+    const componentsDirStories = await getDirFiles(componentsDir, storiesName);
+
+    stories.push(...componentsDirStories);
+  }
+
+  let id = 200000;
+
+  for await (const storyPath of stories) {
+    const storyContent = await readFile(storyPath, "utf-8");
+
+    const storyIdLine = storyContent.split("\n").find((line, idx, array) => {
+      return line.includes("id:") && idx && array[idx - 1].includes("export default");
+    });
+
+    if (!storyIdLine) continue;
+
+    const currentId = parseInt(storyIdLine.split(" ").at(-1).replaceAll('"', ""));
+
+    if (currentId > id && !Number.isNaN(currentId)) {
+      id = currentId;
+    }
+  }
+
+  return id;
+}

package/bin/utils/formatUtil.js

@@ -0,0 +1,48 @@
+import path from "node:path";
+
+export function replaceRelativeImports(componentName, filePath, fileContent) {
+  const isTopLevelFile = path.dirname(filePath).endsWith(componentName);
+  const contentLines = fileContent.split("\n");
+
+  return contentLines.map((line) => replaceRelativeLineImports(line, isTopLevelFile)).join("\n");
+}
+
+function replaceRelativeLineImports(line, isTopLevelFile) {
+  const importRegex = /import\s+(?:[\w\s{},*]+)\s+from\s+(['"])(\.\.?\/.*?)(\.[tj]s)?\1(?!\?)/g;
+
+  const isTopLevelLocalImport = isTopLevelFile && !line.includes("../");
+  const isInnerLocalImport =
+    !isTopLevelFile && (line.includes("../") || line.includes("./")) && !line.includes("../../");
+
+  if (isTopLevelLocalImport || isInnerLocalImport) {
+    return line;
+  }
+
+  return line.replace(importRegex, (match, quote, oldPath, ext) => {
+    const isDefaultImport = match.includes("{");
+
+    if (!isDefaultImport) {
+      match = defaultToNamedImport(match);
+    }
+
+    return match.replace(oldPath + (ext || ""), "vueless");
+  });
+}
+
+function defaultToNamedImport(importString) {
+  const splittedImport = importString.split(" ");
+
+  return splittedImport
+    .map((importStringToken) => {
+      if (importStringToken.includes("import")) {
+        return `${importStringToken} { `;
+      }
+
+      if (importStringToken.includes("from")) {
+        return ` } ${importStringToken} `;
+      }
+
+      return importStringToken;
+    })
+    .join("");
+}

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",
@@ -220,6 +221,10 @@ export const VUELESS_ICONS_LOCAL_DIR = `src/${ICONS_DIR}`;
 export const VUELESS_ICONS_CACHED_DIR = `${VUELESS_CACHE_DIR}/${ICONS_DIR}`;
 export const VUELESS_CONFIGS_CACHED_DIR = `${VUELESS_CACHE_DIR}/configs`;
 
+/* System error codes */
+export const DEFAULT_EXIT_CODE = 0;
+export const FAILURE_CODE = 1;
+
 /* Other */
 export const PX_IN_REM = 16;
 export const NESTED_COMPONENT_PATTERN_REG_EXP = /\{(U[^}]*)}/;
@@ -228,3 +233,5 @@ export const DYNAMIC_COLOR_PATTERN = "{color}";
 export const TAILWIND_COLOR_OPACITY_DELIMITER = "/";
 export const TAILWIND_VARIANT_DELIMITER = ":";
 export const TAILWIND_VARIANT_DELIMITER_REG_EXP = /:(?![^[]*])/;
+export const JAVASCRIPT_EXT = ".js";
+export const TYPESCRIPT_EXT = ".ts";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.673",
+  "version": "0.0.675",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [
@@ -33,7 +33,7 @@
     "build": "npm run pre:start && storybook build --docs",
     "preview": "vite preview --host --outDir=storybook-static",
     "ts:check": "vue-tsc --build --force",
-    "release:prepare": "npm run pre:start && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE README.md dist/ && cp -r bin dist/bin",
+    "release:prepare": "npm run pre:start && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE README.md dist/",
     "release:beta": "release-it --ci --npm.publish --preRelease=beta --increment=prerelease",
     "release:patch": "release-it patch --ci --npm.publish",
     "release:minor": "release-it minor --ci --npm.publish --git.tag --github.release",

package/plugin-vite.js

@@ -14,6 +14,8 @@ import { setCustomPropTypes, removeCustomPropTypes } from "./utils/node/dynamicP
 import { buildWebTypes } from "./utils/node/webTypes.js";
 import { hideHiddenStories, showHiddenStories } from "./utils/node/dynamicStories.js";
 
+import { DEFAULT_EXIT_CODE } from "./constants.js";
+
 /* Automatically importing Vueless components on demand */
 export const VuelessUnpluginComponents = (options) =>
   UnpluginVueComponents({
@@ -48,7 +50,7 @@ export const Vueless = function (options = {}) {
     clearTailwindSafelist(debug);
 
     /* stop command line process */
-    process.exit(0);
+    process.exit(DEFAULT_EXIT_CODE);
   });
 
   return {

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>;

package/ui.boilerplate/storybook/stories.ts

@@ -10,7 +10,7 @@ interface UBoilerplateArgs extends Props {
 }
 
 export default {
-  id: "110010",
+  id: "{{component_id}}",
   title: "Custom / UBoilerplate",
   component: UBoilerplate,
   args: {

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 };
 }