vueless 0.0.792 → 0.0.793

package/package.json

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

package/ui.form-input-rating/UInputRating.vue

@@ -16,7 +16,6 @@ defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<Props>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
-  label: "",
 });
 
 const emit = defineEmits([

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

@@ -10,6 +10,7 @@ import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import UButton from "../../ui.button/UButton.vue";
+import UBadge from "../../ui.text-badge/UBadge.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -24,8 +25,7 @@ export default {
   title: "Text & Content / Alert",
   component: UAlert,
   args: {
-    title: "Default Title",
-    description: "Default Description",
+    title: "Network Error",
   },
   argTypes: {
     ...getArgTypes(UAlert.__name),
@@ -82,79 +82,39 @@ const EnumVariantTemplate: StoryFn<UAlertArgs> = (args: UAlertArgs, { argTypes }
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const Description = DefaultTemplate.bind({});
+Description.args = {
+  description:
+    "Unable to connect to the server. Please check your internet connection and try again.",
+};
+
 export const Variants = EnumVariantTemplate.bind({});
 Variants.args = { enum: "variant" };
 
-export const Colors = EnumVariantTemplate.bind({});
-Colors.args = { enum: "color" };
+export const Bordered = DefaultTemplate.bind({});
+Bordered.args = {
+  title: "Your connection is secure",
+  variant: "thirdary",
+  bordered: true,
+  color: "green",
+};
+Bordered.parameters = {
+  docs: {
+    description: {
+      story: "Add border to the `thirdary` variant.",
+    },
+  },
+};
 
 export const Sizes = EnumVariantTemplate.bind({});
 Sizes.args = { enum: "size" };
 
-export const HTML = DefaultTemplate.bind({});
-HTML.args = {
-  title: "",
-  description: "",
-  slotTemplate: `
-    <h3 class="text-lg font-medium mb-2">Important Security Update</h3>
-    <p class="mb-0.5">
-      <b>Your account password will expire in 10 days,</b> please update it to maintain account security.
-    </p>
-    <a href="https://security.example.com/password-update" target="_blank">Update Password</a>
-  `,
-};
+export const Colors = EnumVariantTemplate.bind({});
+Colors.args = { enum: "color" };
 
 export const Closable = DefaultTemplate.bind({});
 Closable.args = { closable: true };
 
-export const Paragraphs = DefaultTemplate.bind({});
-Paragraphs.args = {
-  slotTemplate: `
-    <template #default>
-      <p>
-        Please be aware that the scheduled maintenance will occur this Saturday,
-        from 12 AM to 4 AM. During this time, some services may be temporarily
-        unavailable.
-      </p>
-      <p>
-        We apologize for any inconvenience this may cause and
-        appreciate your understanding. Our team is committed to improving
-        the system's performance and reliability.
-      </p>
-    </template>
-  `,
-};
-
-export const List = DefaultTemplate.bind({});
-List.args = {
-  slotTemplate: `
-    <URow>
-      <ul>
-        <li>Check your email for verification link.</li>
-        <li>Update your password regularly to enhance security.</li>
-        <li>Enable two-factor authentication for added protection.</li>
-      </ul>
-      <ol>
-        <li>Sign in to your account using your credentials.</li>
-        <li>Navigate to the settings menu to update your profile.</li>
-        <li>Review your privacy settings and adjust them as needed.</li>
-      </ol>
-    </URow>
-  `,
-};
-
-export const SlotTitleAndDescription = DefaultTemplate.bind({});
-SlotTitleAndDescription.args = {
-  slotTemplate: `
-    <template #title>
-      <div class="text-lg font-semibold">This is a custom title for the alert.</div>
-    </template>
-    <template #description>
-      <div class="italic">This is a custom description for the alert.</div>
-    </template>
-  `,
-};
-
 export const SlotClose = DefaultTemplate.bind({});
 SlotClose.args = {
   closable: true,
@@ -170,50 +130,61 @@ SlotClose.args = {
   `,
 };
 
-export const SlotLeft = DefaultTemplate.bind({});
-SlotLeft.args = {
-  slotTemplate: `
-    <template #left>
-      <UIcon
-        name="star"
-        color="gray"
-      />
-    </template>
-  `,
-};
-
-export const SlotRight = DefaultTemplate.bind({});
-SlotRight.args = {
-  slotTemplate: `
-    <template #right>
-        <UIcon
-        name="star"
-        color="gray"
-      />
-    </template>
-  `,
-};
-
-export const SlotTop = DefaultTemplate.bind({});
-SlotTop.args = {
-  slotTemplate: `
-    <template #top>
-      <UIcon
-        name="star"
-        color="gray"
-      />
-    </template>
-  `,
-};
-
-export const SlotBottom = DefaultTemplate.bind({});
-SlotBottom.args = {
-  slotTemplate: `
-    <template #bottom>
-      <UIcon
-        name="star"
-        color="gray"
-      />
-    </template>
+export const Slots: StoryFn<UAlertArgs> = (args) => ({
+  components: { UAlert, UIcon, URow, UCol, UBadge },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UCol>
+      <URow>
+        <UAlert v-bind="args">
+          <template #title>
+            <UBadge
+              label="Connection lost"
+              size="lg"
+              color="red"
+              variant="secondary"
+            />
+          </template>
+        </UAlert>
+
+        <UAlert v-bind="args">
+          <template #description>
+            <UBadge
+              label="We are trying to reconnect. Please wait a moment or check your network settings."
+              color="red"
+              variant="thirdary"
+            />
+          </template>
+        </UAlert>
+      </URow>
+
+      <URow>
+        <UAlert v-bind="args">
+          <template #top>
+            <UIcon name="wifi_off" color="red" />
+          </template>
+        </UAlert>
+
+        <UAlert v-bind="args">
+          <template #bottom>
+            <UIcon name="sync" color="blue" />
+          </template>
+        </UAlert>
+
+        <UAlert v-bind="args">
+          <template #left>
+            <UIcon name="warning" color="yellow" />
+          </template>
+        </UAlert>
+
+        <UAlert v-bind="args" label="Delete">
+          <template #right>
+            <UIcon name="play_arrow" color="green" />
+          </template>
+        </UAlert>
+      </URow>
+    </UCol>
   `,
-};
+});

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

@@ -9,6 +9,7 @@ import UBadge from "../../ui.text-badge/UBadge.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
+import UMoney from "../../ui.text-money/UMoney.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -99,35 +100,100 @@ const EnumVariantTemplate: StoryFn<UBadgeArgs> = (args: UBadgeArgs, { argTypes }
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const Round = DefaultTemplate.bind({});
+Round.args = { round: true };
+
+export const Bordered = DefaultTemplate.bind({});
+Bordered.args = {
+  variant: "thirdary",
+  bordered: true,
+  color: "green",
+};
+Bordered.parameters = {
+  docs: {
+    description: {
+      story: "Add border to the `thirdary` variant.",
+    },
+  },
+};
+
 export const Variants = EnumVariantTemplate.bind({});
 Variants.args = { enum: "variant" };
 
 export const Sizes = EnumVariantTemplate.bind({});
 Sizes.args = { enum: "size" };
 
-export const Colors = ColorsTemplate.bind({});
-Colors.args = {};
-
-export const LeftIcon = DefaultTemplate.bind({});
-LeftIcon.args = { leftIcon: "star" };
-
-export const RightIcon = DefaultTemplate.bind({});
-RightIcon.args = { rightIcon: "star" };
+export const Color = ColorsTemplate.bind({});
+Color.args = {};
 
-export const SlotLeft = DefaultTemplate.bind({});
-SlotLeft.args = {
-  slotTemplate: `
-    <template #left>
-      🤘
-    </template>
+export const IconProps: StoryFn<UBadgeArgs> = (args) => ({
+  components: { UBadge, URow },
+  setup() {
+    return { args };
+  },
+  template: `
+    <URow no-mobile>
+      <UBadge
+        v-bind="args"
+        left-icon="mail"
+        label="Message"
+      />
+      <UBadge
+        v-bind="args"
+        icon="info"
+        label="Info"
+      />
+      <UBadge
+        v-bind="args"
+        right-icon="chat"
+        label="Chat"
+      />
+    </URow>
   `,
-};
+});
 
-export const SlotRight = DefaultTemplate.bind({});
-SlotRight.args = {
-  slotTemplate: `
-    <template #right>
-      🤘
-    </template>
+export const Slots: StoryFn<UBadgeArgs> = (args) => ({
+  components: { UBadge, UIcon, URow, UMoney },
+  setup() {
+    return { args };
+  },
+  template: `
+    <URow no-mobile>
+      <UBadge v-bind="args" label="Add to favorite">
+        <template #left>
+          <UIcon
+            name="heart_plus"
+            size="2xs"
+            color="inherit"
+          />
+        </template>
+      </UBadge>
+
+      <UBadge v-bind="args" label="shopping_cart">
+        <template #default="{ label }">
+          <UMoney
+            value="20.25"
+            size="sm"
+            color="inherit"
+            symbol="$"
+          />
+          <UIcon
+            :name="label"
+            size="2xs"
+            color="inherit"
+          />
+        </template>
+      </UBadge>
+
+      <UBadge v-bind="args" label="Delete">
+        <template #right>
+          <UIcon
+            name="delete"
+            size="2xs"
+            color="inherit"
+          />
+        </template>
+      </UBadge>
+    </URow>
   `,
-};
+});

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

@@ -7,13 +7,15 @@ import {
 
 import UText from "../../ui.text-block/UText.vue";
 import URow from "../../ui.container-row/URow.vue";
+import UCol from "../../ui.container-col/UCol.vue";
+import UBadge from "../../ui.text-badge/UBadge.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
 
 interface UTextArgs extends Props {
   slotTemplate?: string;
-  enum: "size";
+  enum: "size" | "align";
 }
 
 export default {
@@ -33,14 +35,13 @@ export default {
 
 const defaultTemplate = `
   <p>
-    <b>To proceed with your registration</b>, please enter your
-      <u>email address</u> in the field below. <i>A verification link</i> will be sent to your inbox shortly.
-    <a href="https://uk.wikipedia.org/wiki/Lorem_ipsum" target="_blank">Wikipedia</a>
+    <b>To proceed with your registration</b>, please enter your <u>email address</u> in the field below.
+    <i>A verification link</i> will be sent to your inbox shortly.
   </p>
 `;
 
 const DefaultTemplate: StoryFn<UTextArgs> = (args: UTextArgs) => ({
-  components: { UText, URow },
+  components: { UText, URow, UBadge },
   setup() {
     const slots = getSlotNames(UText.__name);
 
@@ -54,7 +55,7 @@ const DefaultTemplate: StoryFn<UTextArgs> = (args: UTextArgs) => ({
 });
 
 const EnumVariantTemplate: StoryFn<UTextArgs> = (args: UTextArgs, { argTypes }) => ({
-  components: { UText, URow },
+  components: { UText, UCol },
   setup() {
     return {
       args,
@@ -62,25 +63,41 @@ const EnumVariantTemplate: StoryFn<UTextArgs> = (args: UTextArgs, { argTypes })
     };
   },
   template: `
-    <URow>
+    <UCol>
       <UText
         v-for="(option, index) in options"
         :key="index"
         v-bind="args"
         :[args.enum]="option"
+        class="w-full"
       >
         ${args.slotTemplate || defaultTemplate}
       </UText>
-    </URow>
+    </UCol>
   `,
 });
 
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const Align = EnumVariantTemplate.bind({});
+Align.args = { enum: "align" };
+
 export const Sizes = EnumVariantTemplate.bind({});
 Sizes.args = { enum: "size" };
 
+export const Line = DefaultTemplate.bind({});
+Line.args = {
+  line: true,
+};
+Line.parameters = {
+  docs: {
+    description: {
+      story: "Removes text line height (useful for 1-line text).",
+    },
+  },
+};
+
 export const Paragraphs = DefaultTemplate.bind({});
 Paragraphs.args = {
   slotTemplate: `
@@ -125,3 +142,12 @@ List.args = {
     </template>
   `,
 };
+
+export const SlotDefault = DefaultTemplate.bind({});
+SlotDefault.args = {
+  slotTemplate: `
+    <UText>To proceed with your registration, please enter your
+    <UBadge label="email address" v-bind="args" color="green" /> in the field below.
+    A verification link will be sent to your inbox shortly.</UText>
+  `,
+};

package/ui.text-block/types.ts

@@ -20,7 +20,7 @@ export interface Props {
   align?: "left" | "center" | "right";
 
   /**
-   * Remove line height (useful for 1-line text).
+   * Removes text line height (useful for 1-line text).
    */
   line?: boolean;
 

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

@@ -9,6 +9,7 @@ import UEmpty from "../../ui.text-empty/UEmpty.vue";
 import UButton from "../../ui.button/UButton.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import URow from "../../ui.container-row/URow.vue";
+import UBadge from "../../ui.text-badge/UBadge.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -24,7 +25,6 @@ export default {
   component: UEmpty,
   args: {
     title: "No contacts",
-    description: "There are no contacts in the list.",
   },
   argTypes: {
     ...getArgTypes(UEmpty.__name),
@@ -37,7 +37,7 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<UEmptyArgs> = (args: UEmptyArgs) => ({
-  components: { UEmpty, UIcon, UButton },
+  components: { UEmpty, UIcon, UButton, UBadge },
   setup() {
     const slots = getSlotNames(UEmpty.__name);
 
@@ -74,6 +74,9 @@ const EnumVariantTemplate: StoryFn<UEmptyArgs> = (args: UEmptyArgs, { argTypes }
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const Description = DefaultTemplate.bind({});
+Description.args = { description: "There are no contacts in the list." };
+
 export const Sizes = EnumVariantTemplate.bind({});
 Sizes.args = { enum: "size", title: "" };
 
@@ -94,7 +97,7 @@ export const SlotDefault = DefaultTemplate.bind({});
 SlotDefault.args = {
   slotTemplate: `
     <template #default>
-      <span>Some unique <b><code>HTML</code></b> or <b><code>Components</code></b>...</span>
+      <UBadge label="There are no contacts in the list." />
     </template>
   `,
 };

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

@@ -6,12 +6,16 @@ import {
 } from "../../utils/storybook.ts";
 
 import UFile from "../../ui.text-file/UFile.vue";
+import URow from "../../ui.container-row/URow.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+import UBadge from "../../ui.text-badge/UBadge.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
 
 interface UFileArgs extends Props {
   slotTemplate?: string;
+  enum: "size";
 }
 
 export default {
@@ -19,7 +23,7 @@ export default {
   title: "Text & Content / File",
   component: UFile,
   args: {
-    label: "some file text",
+    label: "Invoice_123.pdf",
     url: "https://storybook.js.org/",
   },
   argTypes: {
@@ -37,14 +41,66 @@ const DefaultTemplate: StoryFn<UFileArgs> = (args: UFileArgs) => ({
   setup() {
     const slots = getSlotNames(UFile.__name);
 
-    return { args, slots };
+    function showAlert() {
+      return alert("File removed");
+    }
+
+    return { args, slots, showAlert };
   },
   template: `
-    <UFile v-bind="args">
+    <UFile v-bind="args" @remove="() => showAlert()">
       ${args.slotTemplate || getSlotsFragment("")}
     </UFile>
   `,
 });
 
+const EnumVariantTemplate: StoryFn<UFileArgs> = (args: UFileArgs, { argTypes }) => ({
+  components: { UFile, URow },
+  setup() {
+    return { args, options: argTypes?.[args.enum]?.options };
+  },
+  template: `
+    <URow>
+      <UFile
+        v-for="(option, index) in options"
+        :key="index"
+        v-bind="args"
+        :[args.enum]="option"
+      />
+    </URow>
+  `,
+});
+
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
+
+export const ImageURL = DefaultTemplate.bind({});
+ImageURL.args = { imageUrl: "https://picsum.photos/100" };
+
+export const Removable = DefaultTemplate.bind({});
+Removable.args = { removable: true };
+
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size" };
+
+export const Slots: StoryFn<UFileArgs> = (args) => ({
+  components: { UFile, URow, UBadge, UIcon },
+  setup() {
+    return { args };
+  },
+  template: `
+    <URow>
+      <UFile v-bind="args">
+        <template #left>
+          <UIcon name="info" color="orange" size="xs" />
+        </template>
+      </UFile>
+
+      <UFile v-bind="args">
+        <template #right>
+          <UBadge label="File uploaded" color="green" />
+        </template>
+      </UFile>
+    </URow>
+  `,
+});

package/ui.text-files/config.ts

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   filesLabel: "{ULabel}",
   items: "flex flex-col gap-1.5",
-  item: "{UFile} block",
+  item: "{UFile} flex",
   defaults: {
     size: "md",
     labelAlign: "top",

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

@@ -6,12 +6,15 @@ import {
 } from "../../utils/storybook.ts";
 
 import UFiles from "../../ui.text-files/UFiles.vue";
+import URow from "../../ui.container-row/URow.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
 
 interface UFilesArgs extends Props {
   slotTemplate?: string;
+  enum: "size" | "labelAlign";
 }
 
 export default {
@@ -19,10 +22,12 @@ export default {
   title: "Text & Content / Files",
   component: UFiles,
   args: {
-    label: "Label",
+    label: "Documents",
     fileList: [
-      new File(["foo"], "foo.txt", { type: "text/plain" }),
-      new File(["bar"], "foo.txt", { type: "text/plain" }),
+      new File(["Company_Report_2025"], "Company_Report_2025.pdf", { type: "application/pdf" }),
+      new File(["Employee_Resumes"], "Employee_Resumes.xlsx", {
+        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+      }),
     ],
   },
   argTypes: {
@@ -49,5 +54,57 @@ const DefaultTemplate: StoryFn<UFilesArgs> = (args: UFilesArgs) => ({
   `,
 });
 
+const EnumVariantTemplate: StoryFn<UFilesArgs> = (args: UFilesArgs, { argTypes }) => ({
+  components: { UFiles, URow },
+  setup() {
+    return { args, options: argTypes?.[args.enum]?.options };
+  },
+  template: `
+    <URow>
+      <UFiles
+        v-for="(option, index) in options"
+        :key="index"
+        v-bind="args"
+        :[args.enum]="option"
+        :label="option"
+      />
+    </URow>
+  `,
+});
+
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
+
+export const Description = DefaultTemplate.bind({});
+Description.args = {
+  description: "These files include important documents like reports and employee data.",
+};
+
+export const Removable = DefaultTemplate.bind({});
+Removable.args = { removable: true };
+
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size" };
+
+export const LabelPlacement = EnumVariantTemplate.bind({});
+LabelPlacement.args = {
+  enum: "labelAlign",
+  description: "These files include important documents like reports and employee data.",
+};
+
+export const Slots: StoryFn<UFilesArgs> = (args) => ({
+  components: { UFiles, URow, UIcon },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UFiles v-bind="args">
+      <template #left="{ index }">
+        <UIcon v-if="index === 0" name="info" color="orange" size="xs" />
+      </template>
+      <template #right="{ index }">
+        <UIcon v-if="index === 1" name="check_circle" color="green" size="xs" />
+      </template>
+    </UFiles>
+  `,
+});

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

@@ -7,6 +7,7 @@ import {
 
 import UHeader from "../../ui.text-header/UHeader.vue";
 import UCol from "../../ui.container-col/UCol.vue";
+import UBadge from "../../ui.text-badge/UBadge.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -21,7 +22,7 @@ export default {
   title: "Text & Content / Header",
   component: UHeader,
   args: {
-    label: "Header",
+    label: "Dashboard",
   },
   argTypes: {
     ...getArgTypes(UHeader.__name),
@@ -34,7 +35,7 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<UHeaderArgs> = (args: UHeaderArgs) => ({
-  components: { UHeader },
+  components: { UHeader, UBadge },
   setup() {
     const slots = getSlotNames(UHeader.__name);
 
@@ -62,7 +63,7 @@ const EnumVariantTemplate: StoryFn<UHeaderArgs> = (args: UHeaderArgs, { argTypes
         :key="index"
         v-bind="args"
         :[args.enum]="option"
-        :label="'Header ' + option"
+        :label="args.label + ' (' + option + ')'"
       />
     </UCol>
   `,
@@ -79,10 +80,24 @@ Underlined.args = { enum: "size", underlined: true };
 
 export const Line = DefaultTemplate.bind({});
 Line.args = {
-  size: "2xl",
-  line: false,
-  label: "Some very long header you ever may imagine in your whole long and beautiful life",
+  size: "xl",
+  line: true,
+  label: "Detailed Analysis of User Engagement Metrics",
+};
+Line.parameters = {
+  docs: {
+    description: {
+      story: "Removes text line height (useful for 1-line text).",
+    },
+  },
 };
 
 export const Colors = EnumVariantTemplate.bind({});
 Colors.args = { enum: "color" };
+
+export const SlotDefault = DefaultTemplate.bind({});
+SlotDefault.args = {
+  slotTemplate: `
+    <UBadge v-bind="args" size="lg" color="green" />
+  `,
+};

package/ui.text-header/types.ts

@@ -46,7 +46,7 @@ export interface Props {
   tag?: string;
 
   /**
-   * Removes text line height (disable for multiline headers).
+   * Removes text line height (useful for 1-line text).
    */
   line?: boolean;
 

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

@@ -19,7 +19,7 @@ import type { Props } from "../types.ts";
 
 interface UMoneyArgs extends Props {
   slotTemplate?: string;
-  enum: "color" | "size" | "sign" | "symbolAlign";
+  enum: "color" | "size" | "sign" | "align" | "symbolAlign";
 }
 
 export default {
@@ -67,7 +67,7 @@ const EnumVariantTemplate: StoryFn<UMoneyArgs> = (args: UMoneyArgs, { argTypes }
     };
   },
   template: `
-    <URow>
+    <URow :class="{ '!flex-col items-stretch': args.enum === 'align' }">
       <UMoney
         v-for="(option, index) in options"
         :key="index"
@@ -86,24 +86,59 @@ const EnumVariantTemplate: StoryFn<UMoneyArgs> = (args: UMoneyArgs, { argTypes }
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const Sign = EnumVariantTemplate.bind({});
+Sign.args = { enum: "sign" };
+
+export const Align = EnumVariantTemplate.bind({});
+Align.args = { enum: "align" };
+
+export const SymbolAlign = EnumVariantTemplate.bind({});
+SymbolAlign.args = { enum: "symbolAlign" };
+
 export const Colors = EnumVariantTemplate.bind({});
 Colors.args = { enum: "color" };
 
 export const Sizes = EnumVariantTemplate.bind({});
 Sizes.args = { enum: "size" };
 
-export const Sign = EnumVariantTemplate.bind({});
-Sign.args = { enum: "sign" };
-
-export const SymbolAlign = EnumVariantTemplate.bind({});
-SymbolAlign.args = { enum: "symbolAlign" };
+export const LimitFractionDigits = DefaultTemplate.bind({});
+LimitFractionDigits.args = {
+  minFractionDigits: 4,
+  maxFractionDigits: 6,
+};
+LimitFractionDigits.parameters = {
+  docs: {
+    description: {
+      story:
+        // eslint-disable-next-line vue/max-len
+        "`minFractionDigits` and `maxFractionDigits` props determine the minimum/maximum number of digits to display after the decimal separator.",
+    },
+  },
+};
+
+export const DecimalSeparator = DefaultTemplate.bind({});
+DecimalSeparator.args = { decimalSeparator: "." };
+DecimalSeparator.parameters = {
+  docs: {
+    description: {
+      story: "A symbol used to separate the integer part from the fractional part of a number.",
+    },
+  },
+};
+
+export const ThousandsSeparator = DefaultTemplate.bind({});
+ThousandsSeparator.args = { value: -1400000.24, thousandsSeparator: "-" };
+ThousandsSeparator.parameters = {
+  docs: {
+    description: {
+      story: "A symbol used to separate the thousand parts of a number.",
+    },
+  },
+};
 
 export const Planned = DefaultTemplate.bind({});
 Planned.args = { planned: true };
 
-export const MinFractionDigits4 = DefaultTemplate.bind({});
-MinFractionDigits4.args = { minFractionDigits: 4, maxFractionDigits: 4 };
-
 export const Slots: StoryFn<UMoneyArgs> = (args) => ({
   components: { UMoney, UIcon, URow },
   setup() {

package/ui.text-money/types.ts

@@ -48,7 +48,7 @@ export interface Props {
   /**
    * Money currency symbol align.
    */
-  symbolAlign?: "right" | "left";
+  symbolAlign?: "left" | "right";
 
   /**
    * Add space between currency symbol and sum.

package/ui.text-notify/UNotify.vue

@@ -187,21 +187,11 @@ const {
       />
 
       <div v-bind="contentAttrs">
-        <template v-if="html">
-          <span v-bind="labelAttrs" v-html="notification.label" />
-          <span
-            v-bind="descriptionAttrs"
-            v-html="getText(notification.description, notification.type)"
-          />
-        </template>
-
-        <template v-else>
-          <span v-bind="labelAttrs" v-text="notification.label" />
-          <span
-            v-bind="descriptionAttrs"
-            v-text="getText(notification.description, notification.type)"
-          />
-        </template>
+        <span v-bind="labelAttrs" v-text="notification.label" />
+        <span
+          v-bind="descriptionAttrs"
+          v-text="getText(notification.description, notification.type)"
+        />
       </div>
 
       <UIcon

package/ui.text-notify/config.ts

@@ -44,7 +44,6 @@ export default /*tw*/ {
   defaults: {
     xPosition: "center",
     yPosition: "top",
-    html: false,
     /* icons */
     successIcon: "check_circle",
     warningIcon: "warning",

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

@@ -106,6 +106,13 @@ Default.args = {};
 
 export const Position = DefaultTemplate.bind({});
 Position.args = { xPosition: "right", yPosition: "bottom" };
+Position.parameters = {
+  docs: {
+    description: {
+      story: "Control notify's position in your layout via `xPosition` and `yPosition` props.",
+    },
+  },
+};
 
 export const Types = TypesTemplate.bind({});
 Types.args = {};

package/ui.text-notify/types.ts

@@ -37,11 +37,6 @@ export interface Props {
    */
   yPosition?: "top" | "bottom";
 
-  /**
-   * Use html to render you own content.
-   */
-  html?: boolean;
-
   /**
    * Component config object.
    */

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

@@ -12,7 +12,7 @@ import type { Props } from "../types.ts";
 
 interface UNumberArgs extends Props {
   slotTemplate?: string;
-  enum: "color" | "size" | "sign";
+  enum: "color" | "size" | "sign" | "align";
 }
 
 export default {
@@ -48,7 +48,7 @@ const EnumVariantTemplate: StoryFn<UNumberArgs> = (args: UNumberArgs, { argTypes
     return { args, options: argTypes?.[args.enum]?.options };
   },
   template: `
-    <URow>
+    <URow :class="{ '!flex-col items-stretch': args.enum === 'align' }">
       <UNumber
         v-for="(option, index) in options"
         :key="index"
@@ -67,6 +67,12 @@ const EnumVariantTemplate: StoryFn<UNumberArgs> = (args: UNumberArgs, { argTypes
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const Sign = EnumVariantTemplate.bind({});
+Sign.args = { enum: "sign" };
+
+export const Align = EnumVariantTemplate.bind({});
+Align.args = { enum: "align" };
+
 export const Colors = EnumVariantTemplate.bind({});
 Colors.args = {
   enum: "color",
@@ -76,11 +82,40 @@ Colors.args = {
 export const Sizes = EnumVariantTemplate.bind({});
 Sizes.args = { enum: "size" };
 
-export const Sign = EnumVariantTemplate.bind({});
-Sign.args = { enum: "sign" };
+export const LimitFractionDigits = DefaultTemplate.bind({});
+LimitFractionDigits.args = {
+  minFractionDigits: 4,
+  maxFractionDigits: 6,
+};
+LimitFractionDigits.parameters = {
+  docs: {
+    description: {
+      story:
+        // eslint-disable-next-line vue/max-len
+        "`minFractionDigits` and `maxFractionDigits` props determine the minimum/maximum number of digits to display after the decimal separator.",
+    },
+  },
+};
 
-export const MinFractionDigits4 = DefaultTemplate.bind({});
-MinFractionDigits4.args = { minFractionDigits: 4, maxFractionDigits: 4 };
+export const DecimalSeparator = DefaultTemplate.bind({});
+DecimalSeparator.args = { decimalSeparator: "." };
+DecimalSeparator.parameters = {
+  docs: {
+    description: {
+      story: "A symbol used to separate the integer part from the fractional part of a number.",
+    },
+  },
+};
+
+export const ThousandsSeparator = DefaultTemplate.bind({});
+ThousandsSeparator.args = { value: -1400000.24, thousandsSeparator: "-" };
+ThousandsSeparator.parameters = {
+  docs: {
+    description: {
+      story: "A symbol used to separate the thousand parts of a number.",
+    },
+  },
+};
 
 export const Slots: StoryFn<UNumberArgs> = (args) => ({
   components: { UNumber, UIcon, URow, UBadge },

package/ui.text-number/types.ts

@@ -68,7 +68,7 @@ export interface Props {
   /**
    * Number align.
    */
-  align?: "right" | "left";
+  align?: "left" | "right";
 
   /**
    * Component config object.