vueless 1.0.2-beta.14 → 1.0.2-beta.16

package/icons/storybook/done_all.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M294.24-230.52 64.5-460.26 113-509l181 181 48.74 48.74-48.5 48.74ZM464-236.26 234.02-466.48l48.98-48.5 181 181L847.76-717.5l48.98 48.5L464-236.26Zm0-175.98-48.5-48.74 257-257 48.5 48.74-257 257Z"/></svg>

package/icons/storybook/handyman.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M771.65-67.33q-6.72 0-12.55-2.35-5.84-2.36-11.32-7.84L502.2-323.11q-5.48-5.48-7.84-11.31-2.36-5.84-2.36-12.56 0-6.72 2.36-12.67 2.36-5.96 7.84-11.44l85.47-85.48q5.48-5.47 11.32-7.95 5.84-2.48 12.79-2.48 6.72 0 12.56 2.48 5.83 2.48 11.31 7.95l245.59 245.83q5.48 5.48 7.96 11.2 2.47 5.71 2.47 12.67 0 6.72-2.59 12.67-2.6 5.96-7.84 11.2l-85.48 85.48q-5.48 5.48-11.31 7.84-5.84 2.35-12.8 2.35Zm.24-77.97 41.57-41.57-201.92-202.15-41.56 41.56L771.89-145.3Zm-584.3 77.74q-6.72 0-13.06-2.24-6.33-2.24-11.81-7.72L78.24-162q-5.48-5.24-7.72-11.46-2.24-6.21-2.24-13.17 0-6.72 2.24-12.67 2.24-5.96 7.72-11.44L308.74-441h87.15l37.28-37.28L255.3-656.15h-58.43L66.85-786.17l104.5-104.5 130.02 130.02v58.43l177.87 177.87 130.72-130.72-68.2-68.19 56-55.76h-113l-20.15-20.39 134.22-134.46 20.39 20.63v112.76l56-56 174.02 174.26q15.48 15.72 24.46 35.94 8.97 20.21 8.97 42.93 0 21.44-7.45 41.25-7.46 19.82-20.42 35.77l-87.15-87.15-57.43 57.44-53.2-53.2-215.06 215.07v86.39L211.46-77.52q-5.48 5.48-11.2 7.72-5.72 2.24-12.67 2.24Zm0-77.74 202.39-202.16v-41.56h-41.57L146.02-186.87l41.57 41.57Zm0 0-41.57-41.57 21.28 20.28 20.29 21.29Zm584.3 0 41.57-41.57-41.57 41.57Z"/></svg>

package/icons/storybook/question_mark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M428.13-330.96q1-75.58 17.46-110.74 16.45-35.15 60.17-72.95 41.28-36.33 62.83-68.26 21.54-31.92 21.54-68.63 0-43.57-28.92-72.49-28.93-28.93-80.54-28.93-50.56 0-78.8 28.67-28.24 28.66-41.48 62.81l-92.61-40.59q23.2-62.58 77.49-105.28 54.3-42.69 135.35-42.69 102.2 0 157.4 57.09t55.2 137.65q0 50.87-20.62 91.42-20.62 40.55-65.86 82.84-48.28 45.32-58.52 70.44-10.24 25.12-11 79.64H428.13ZM480.62-73.3q-31.34 0-53.39-22.06-22.06-22.05-22.06-53.32t22.04-53.33q22.03-22.06 53.44-22.06 31.42 0 53.47 22.06 22.05 22.06 22.05 53.33t-22.1 53.32Q511.96-73.3 480.62-73.3Z"/></svg>

package/icons/storybook/trending_up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m122.76-234.74-48.74-48.74 298.94-297.69 167 167 231.91-232.4H647.02v-68.36h239.2v239.19h-67.37v-121.09L538.96-316.7l-167-167-249.2 248.96Z"/></svg>

package/package.json

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

package/ui.form-select/USelect.vue

@@ -33,12 +33,6 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits([
-  /**
-   * Triggers when the select component is clicked.
-   * @property {boolean} value
-   */
-  "click",
-
   /**
    * Triggers when a dropdown list is opened.
    * @property {string} elementId
@@ -255,8 +249,6 @@ function deactivate() {
 }
 
 function activate() {
-  emit("click", isOpen.value);
-
   if (isOpen.value || props.disabled || props.readonly) {
     return;
   }

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

@@ -12,6 +12,8 @@ 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 ULink from "../../ui.button-link/ULink.vue";
+import UText from "../../ui.text-block/UText.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -26,7 +28,7 @@ export default {
   title: "Text & Content / Alert",
   component: UAlert,
   args: {
-    title: "Network Error",
+    title: "Scheduled Maintenance Notice",
   },
   argTypes: {
     ...getArgTypes(UAlert.__name),
@@ -67,18 +69,23 @@ Default.args = {};
 
 export const Description = DefaultTemplate.bind({});
 Description.args = {
-  description:
-    "Unable to connect to the server. Please check your internet connection and try again.",
+  description: `
+    Our website will be undergoing scheduled maintenance on March 15th from 2:00 AM to 4:00 AM UTC.
+    Some features may be temporarily unavailable during this time. We appreciate your patience!
+  `,
 };
 
 export const Variants = EnumTemplate.bind({});
-Variants.args = { enum: "variant", title: "{enumValue}" };
+Variants.args = { enum: "variant" };
 
 export const Sizes = EnumTemplate.bind({});
-Sizes.args = { enum: "size", title: "{enumValue}" };
+Sizes.args = { enum: "size" };
 
 export const Colors = EnumTemplate.bind({});
-Colors.args = { enum: "color", title: "{enumValue}" };
+Colors.args = { enum: "color" };
+
+export const Icon = DefaultTemplate.bind({});
+Icon.args = { icon: "handyman" };
 
 export const Closable = DefaultTemplate.bind({});
 Closable.args = { closable: true };
@@ -90,8 +97,7 @@ CloseSlot.args = {
     <template #close="{ close }">
       <UButton
         label="Close"
-        variant="solid"
-        color="neutral"
+        variant="ghost"
         size="sm"
         @click="close"
       />
@@ -100,38 +106,74 @@ CloseSlot.args = {
 };
 
 export const Slots: StoryFn<UAlertArgs> = (args) => ({
-  components: { UAlert, UIcon, URow, UBadge },
+  components: { UAlert, UIcon, URow, UCol, UButton, UBadge, ULink, UText },
   setup() {
     return { args };
   },
   template: `
-    <URow>
-      <UAlert v-bind="args">
-        <template #title>
-          <UBadge
-            label="Connection lost"
-            size="lg"
-            color="error"
-            variant="outlined"
-          />
+    <UCol>
+      <UAlert
+        title="New Feature Available"
+        description="We've just released our new AI-powered analytics dashboard.
+          Try it out and let us know what you think!"
+        color="success"
+        icon="question_mark"
+      >
+        <template #left="{ iconName }">
+          <URow align="center" gap="none">
+            <ULink label="What's New" color="success" />
+            <UIcon :name="iconName" color="success" size="2xs" class="mb-1" />
+          </URow>
         </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="error"
-            variant="soft"
-          />
+      <UAlert
+        title="System Maintenance"
+        description="Scheduled maintenance will begin in 30 minutes. Estimated downtime: 2 hours."
+        color="warning"
+      >
+        <template #title>
+          <URow align="center" gap="sm">
+            <UBadge
+              label="MAINTENANCE"
+              size="sm"
+              color="warning"
+              variant="outlined"
+            />
+            <UText label="System Maintenance" size="sm" />
+          </URow>
         </template>
       </UAlert>
 
-      <UAlert v-bind="args">
-        <template #left>
-          <UIcon name="warning" color="warning" />
+      <UAlert
+        title="Welcome to Vueless!"
+        description="You've successfully joined our community.
+          Check out our documentation to get started with building beautiful interfaces."
+        color="info"
+      >
+        <template #description>
+          <UCol>
+            <p>
+              You've successfully joined our community. Check out our documentation
+              to get started with building beautiful interfaces.
+            </p>
+            <URow gap="sm">
+              <UButton
+                label="View Docs"
+                variant="ghost"
+                size="sm"
+                color="info"
+              />
+              <UButton
+                label="Join Discord"
+                variant="ghost"
+                size="sm"
+                color="info"
+              />
+            </URow>
+          </UCol>
         </template>
       </UAlert>
-    </URow>
+    </UCol>
   `,
 });

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

@@ -11,6 +11,8 @@ 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 UNumber from "../../ui.text-number/UNumber.vue";
+import UText from "../../ui.text-block/UText.vue";
+import UDot from "../../ui.other-dot/UDot.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -26,7 +28,7 @@ export default {
   title: "Text & Content / Badge",
   component: UBadge,
   args: {
-    label: "Badge",
+    label: "3 New Messages",
   },
   argTypes: {
     ...getArgTypes(UBadge.__name),
@@ -85,10 +87,10 @@ export const Round = DefaultTemplate.bind({});
 Round.args = { round: true };
 
 export const Variants = EnumTemplate.bind({});
-Variants.args = { enum: "variant", label: "{enumValue}" };
+Variants.args = { enum: "variant" };
 
 export const Sizes = EnumTemplate.bind({});
-Sizes.args = { enum: "size", label: "{enumValue}" };
+Sizes.args = { enum: "size" };
 
 export const Colors = MultiEnumTemplate.bind({});
 Colors.args = { outerEnum: "variant", enum: "color", label: "{enumValue}" };
@@ -120,45 +122,32 @@ export const IconProps: StoryFn<UBadgeArgs> = (args) => ({
 });
 
 export const Slots: StoryFn<UBadgeArgs> = (args) => ({
-  components: { UBadge, UIcon, URow, UNumber },
+  components: { UBadge, UIcon, URow, UNumber, UText, UDot },
   setup() {
     return { args };
   },
   template: `
     <URow>
-      <UBadge label="Add to favorite">
+      <UBadge label="Live" variant="outlined">
         <template #left>
-          <UIcon
-            name="heart_plus"
-            size="2xs"
-            color="inherit"
-          />
+          <UDot color="error" size="sm" />
         </template>
       </UBadge>
 
-      <UBadge label="shopping_cart">
-        <template #default="{ label }">
+      <UBadge variant="outlined">
+        <template #default>
           <UNumber
             value="20.25"
             size="sm"
             currency="$"
-            color="inherit"
-          />
-          <UIcon
-            :name="label"
-            size="2xs"
-            color="inherit"
+            currency-space
           />
         </template>
       </UBadge>
 
-      <UBadge label="Delete">
+      <UBadge label="Status:" variant="outlined">
         <template #right>
-          <UIcon
-            name="delete"
-            size="2xs"
-            color="inherit"
-          />
+          <UText label="Active" size="sm" />
         </template>
       </UBadge>
     </URow>

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

@@ -176,11 +176,13 @@ FormattedText.args = {
   `,
 };
 
-export const NestedComponent = DefaultTemplate.bind({});
-NestedComponent.args = {
+export const DefaultSlot = DefaultTemplate.bind({});
+DefaultSlot.args = {
   slotTemplate: `
-    <p>To proceed with your registration, please enter your
-    <UBadge label="email address" color="success" variant="subtle" /> in the field below.
-    A verification link will be sent to your inbox shortly.</p>
+    <template #default>
+      <p>To proceed with your registration, please enter your
+      <UBadge label="email address" color="success" variant="subtle" /> in the field below.
+      A verification link will be sent to your inbox shortly.</p>
+    </template>
   `,
 };

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

@@ -4,7 +4,6 @@ import {
   getSlotNames,
   getSlotsFragment,
   getDocsDescription,
-  getEnumVariantDescription,
 } from "../../utils/storybook.ts";
 
 import UFile from "../../ui.text-file/UFile.vue";
@@ -78,14 +77,15 @@ export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
 export const ImageURL = DefaultTemplate.bind({});
-ImageURL.args = { imageUrl: "https://picsum.photos/100" };
+ImageURL.args = {
+  imageUrl: "https://cdn-icons-png.flaticon.com/256/11039/11039912.png",
+};
 
 export const Removable = DefaultTemplate.bind({});
 Removable.args = { removable: true };
 
 export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size" };
-Sizes.parameters = getEnumVariantDescription();
 
 export const Slots: StoryFn<UFileArgs> = (args) => ({
   components: { UFile, URow, UBadge, UIcon },
@@ -102,7 +102,7 @@ export const Slots: StoryFn<UFileArgs> = (args) => ({
 
       <UFile v-bind="args">
         <template #right>
-          <UBadge label="File uploaded" color="success" />
+          <UBadge label="File uploaded" color="success" size="sm" variant="subtle" right-icon="done_all" />
         </template>
       </UFile>
     </URow>

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

@@ -4,15 +4,12 @@ import {
   getSlotNames,
   getSlotsFragment,
   getDocsDescription,
-  getEnumVariantDescription,
 } from "../../utils/storybook.ts";
 
 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 tooltip from "../../directives/tooltip/vTooltip.ts";
-
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
 
@@ -50,7 +47,6 @@ const DefaultTemplate: StoryFn<UHeaderArgs> = (args: UHeaderArgs) => ({
 
 const EnumTemplate: StoryFn<UHeaderArgs> = (args: UHeaderArgs, { argTypes }) => ({
   components: { UHeader, UCol },
-  directives: { tooltip },
   setup: () => ({ args, argTypes, getArgs }),
   template: `
     <UCol>
@@ -58,7 +54,6 @@ const EnumTemplate: StoryFn<UHeaderArgs> = (args: UHeaderArgs, { argTypes }) =>
         v-for="option in argTypes?.[args.enum]?.options"
         v-bind="getArgs(args, option)"
         :key="option"
-        v-tooltip="option"
       />
     </UCol>
   `,
@@ -69,15 +64,12 @@ Default.args = {};
 
 export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size" };
-Sizes.parameters = getEnumVariantDescription();
 
 export const Variants = EnumTemplate.bind({});
 Variants.args = { enum: "variant" };
-Variants.parameters = getEnumVariantDescription();
 
 export const Colors = EnumTemplate.bind({});
 Colors.args = { enum: "color" };
-Colors.parameters = getEnumVariantDescription();
 
 export const DefaultSlot = DefaultTemplate.bind({});
 DefaultSlot.args = {

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

@@ -36,7 +36,7 @@ notify({
 });
 
 notifySuccess({ description: "The file successfully downloaded." });
-notifyWarning({ description: "The file have been downloaded, but some data is missing." });
+notifyWarning({ description: "The file has been downloaded, but some data is missing." });
 notifyError({ description: "The file can't be downloaded, please check the fields and try again." });
 `} language="jsx" dark />
 

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

@@ -6,7 +6,6 @@ import {
 } from "../../utils/storybook.ts";
 
 import { notify } from "../utilNotify.js";
-import { NotificationType } from "../constants.ts";
 
 import UNotify from "../../ui.text-notify/UNotify.vue";
 import UButton from "../../ui.button/UButton.vue";
@@ -38,65 +37,56 @@ export default {
 
 const DefaultTemplate: StoryFn<UNotifyArgs> = (args: UNotifyArgs) => ({
   components: { UNotify, UButton },
-  setup() {
-    function onClick() {
-      notify({
-        type: NotificationType.Success,
-        label: "Hurray!",
-        description: "The file successfully downloaded.",
-      });
-    }
-
-    const slots = getSlotNames(UNotify.__name);
-
-    return { args, slots, onClick };
-  },
+  setup: () => ({ args, slots: getSlotNames(UNotify.__name), notify }),
   template: `
     <UNotify class="m-4" v-bind="args">
       ${args.slotTemplate || getSlotsFragment("")}
     </UNotify>
-    <UButton label="Show notify" @click="onClick"/>
+    <UButton
+      label="Show notify"
+      @click="notify({
+        type: 'success',
+        label: 'Hurray!',
+        description: 'The file has been downloaded successfully.',
+      })"
+    />
   `,
 });
 
 const TypesTemplate: StoryFn<UNotifyArgs> = (args: UNotifyArgs) => ({
   components: { UNotify, UButton, UCol },
-  setup() {
-    function onClick(type: string) {
-      if (type === NotificationType.Success) {
-        notify({
-          type,
-          label: "Hurray!",
-          description: "The file successfully downloaded.",
-        });
-      }
-
-      if (type === NotificationType.Warning) {
-        notify({
-          type,
-          label: "Be aware!",
-          description: "The file have been downloaded, but some data is missing.",
-        });
-      }
-
-      if (type === NotificationType.Error) {
-        notify({
-          type,
-          label: "Ooops!",
-          description: "The file can't be downloaded, please check the fields and try again.",
-        });
-      }
-    }
-
-    return { args, onClick };
-  },
+  setup: () => ({ args, notify }),
   template: `
     <UNotify class="m-4" />
 
     <UCol>
-      <UButton label="Success" color="success" @click="onClick('success')"/>
-      <UButton label="Warning" color="warning" @click="onClick('warning')"/>
-      <UButton label="Error" color="error" @click="onClick('error')"/>
+      <UButton
+        label="Success"
+        color="success"
+        @click="notify({
+          type: 'success',
+          label: 'Hurray!',
+          description: 'The file has been downloaded successfully.',
+        })"
+      />
+      <UButton
+        label="Warning"
+        color="warning"
+        @click="notify({
+          type: 'warning',
+          label: 'Be aware!',
+          description: 'The file has been downloaded, but some data is missing. Please check the file and try again.',
+        })"
+      />
+      <UButton
+        label="Error"
+        color="error"
+        @click="notify({
+          type: 'error',
+          label: 'Ooops!',
+          description: 'The file cant be downloaded, please check the file and try again.',
+        })"
+      />
     </UCol>
   `,
 });

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

@@ -1,18 +1,9 @@
-import {
-  getArgs,
-  getArgTypes,
-  getSlotNames,
-  getSlotsFragment,
-  getEnumVariantDescription,
-} from "../../utils/storybook.ts";
+import { getArgs, 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 UCol from "../../ui.container-col/UCol.vue";
-import UBadge from "../../ui.text-badge/UBadge.vue";
-
-import tooltip from "../../directives/tooltip/vTooltip.ts";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -28,7 +19,6 @@ export default {
   component: UNumber,
   args: {
     value: -14.24,
-    sign: "auto",
   },
   argTypes: {
     ...getArgTypes(UNumber.__name),
@@ -36,7 +26,7 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<UNumberArgs> = (args: UNumberArgs) => ({
-  components: { UNumber, UIcon, UBadge },
+  components: { UNumber, UIcon },
   setup: () => ({ args, slots: getSlotNames(UNumber.__name) }),
   template: `
     <UNumber v-bind="args">
@@ -47,7 +37,6 @@ const DefaultTemplate: StoryFn<UNumberArgs> = (args: UNumberArgs) => ({
 
 const EnumTemplate: StoryFn<UNumberArgs> = (args: UNumberArgs, { argTypes }) => ({
   components: { UNumber, URow },
-  directives: { tooltip },
   setup: () => ({ args, argTypes, getArgs }),
   template: `
     <URow>
@@ -55,7 +44,6 @@ const EnumTemplate: StoryFn<UNumberArgs> = (args: UNumberArgs, { argTypes }) =>
         v-for="option in argTypes?.[args.enum]?.options"
         v-bind="getArgs(args, option)"
         :key="option"
-        v-tooltip="option"
       />
     </URow>
   `,
@@ -64,48 +52,34 @@ const EnumTemplate: StoryFn<UNumberArgs> = (args: UNumberArgs, { argTypes }) =>
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const Currency = DefaultTemplate.bind({});
+Currency.args = { currency: "$" };
+
+export const CurrencySpace = DefaultTemplate.bind({});
+CurrencySpace.args = { currency: "EUR", currencySpace: true };
+
 export const Sign = EnumTemplate.bind({});
 Sign.args = { enum: "sign" };
-Sign.parameters = getEnumVariantDescription();
 
 export const Align: StoryFn<UNumberArgs> = (args: UNumberArgs) => ({
   components: { UNumber, URow, UCol },
-  directives: { tooltip },
-  setup() {
-    const options = ["left", "right"];
-
-    return { args, options };
-  },
+  setup: () => ({ args }),
   template: `
-    <UCol>
-      <URow
-        :justify="option === 'right' ? 'end' : 'start'"
-        block
-        v-for="(option, index) in options"
-        :key="index"
-      >
-        <UNumber
-          v-bind="args"
-          :align="option"
-          v-tooltip="option"
-        />
-      </URow>
+    <UCol block align="stretch">
+      <UNumber v-bind="args" align="left" />
+      <UNumber v-bind="args" align="right" />
     </UCol>
   `,
 });
-Align.parameters = getEnumVariantDescription();
 
 export const Colors = EnumTemplate.bind({});
-Colors.args = { enum: "color", sign: "auto" };
-Colors.parameters = getEnumVariantDescription();
+Colors.args = { enum: "color" };
 
 export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size" };
-Sizes.parameters = getEnumVariantDescription();
 
 export const CurrencyAlign = EnumTemplate.bind({});
 CurrencyAlign.args = { enum: "currencyAlign", currency: "USD", currencySpace: true };
-CurrencyAlign.parameters = getEnumVariantDescription();
 
 export const LimitFractionDigits = DefaultTemplate.bind({});
 LimitFractionDigits.args = {
@@ -143,21 +117,21 @@ ThousandsSeparator.parameters = {
 };
 
 export const Slots: StoryFn<UNumberArgs> = (args) => ({
-  components: { UNumber, UIcon, URow, UBadge },
+  components: { UNumber, UIcon, URow },
   setup() {
     return { args };
   },
   template: `
-    <URow>
-      <UNumber v-bind="args">
+    <URow align="center">
+      <UNumber v-bind="args" value="29.99" currency="$">
         <template #left>
-          <UIcon name="payments" color="success" class="mr-1" />
+          <UIcon name="payments" color="success" size="sm" class="mr-1" />
         </template>
       </UNumber>
 
-      <UNumber v-bind="args">
+      <UNumber v-bind="args" value="156.78" currency="$">
         <template #right>
-          <UBadge label="Quantity" color="success" class="ml-1" />
+          <UIcon name="trending_up" color="success" size="sm" class="ml-1" />
         </template>
       </UNumber>
     </URow>

package/icons/storybook/heart_plus.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M439.76-497.48Zm0 384.61-90.63-83.59q-92.98-85.02-153.47-145.25-60.49-60.22-96.68-108.14-36.2-47.91-50.7-89.33t-14.5-88.23q0-92.77 62.21-157.1 62.22-64.34 153.77-64.34 56.83 0 105.18 25.78 48.34 25.79 84.82 75.83 42.48-52.8 89.25-77.21 46.77-24.4 100.75-24.4 82.25 0 139.12 56.2 56.86 56.19 69.34 136.58h-68.09q-8.76-52.84-45.3-88.63-36.55-35.78-95.07-35.78-49.56 0-93.68 30.76-44.12 30.76-68.01 87.05h-57.14q-23.36-55.29-67.18-86.55-43.81-31.26-93.91-31.26-65.36 0-106.52 43.93-41.17 43.93-41.17 109.07 0 39.33 15.4 76.3t53.52 84q38.13 47.03 103.78 109.76 65.65 62.73 164.91 154.79 30.57-28.04 55.96-50.41 25.39-22.37 52.43-45.42l7.51 7.39 16.27 16.01q8.76 8.62 16.36 15.98l7.6 7.36q-26.28 23.52-52.51 46.22-26.22 22.7-58.31 52.04l-45.31 40.59Zm279-163.06v-130h-130v-68.14h130v-130h68.13v130h130v68.14h-130v130h-68.13Z"/></svg>

package/icons/storybook/label.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M142.15-154.02q-28.35 0-48.24-19.89t-19.89-48.24v-515.7q0-28.45 19.89-48.41 19.89-19.96 48.24-19.96h466.7q16.47 0 30.91 7.35 14.45 7.34 24.02 20.24L887.22-480 664.78-181.37q-9.57 12.9-24.02 20.13-14.44 7.22-30.91 7.22h-467.7Zm-.24-67.89h467.42L802.17-480 609.42-738.09H141.91v516.18ZM376.24-480Z"/></svg>

package/icons/storybook/warning.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M34.74-116.89 480-886.22l445.26 769.33H34.74Zm113.8-65.74h662.92L480-754.98 148.54-182.63Zm335.64-54.85q12.96 0 21.87-9.08 8.91-9.09 8.91-22.05t-9.09-21.75q-9.08-8.79-22.05-8.79-12.96 0-21.87 8.96-8.91 8.97-8.91 21.93 0 12.96 9.09 21.87 9.08 8.91 22.05 8.91ZM454-348h60v-222.09h-60V-348Zm26-120.8Z"/></svg>