vueless 0.0.702 → 0.0.703

package/package.json

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

package/ui.form-input/UInput.vue

@@ -287,7 +287,7 @@ const {
           @binding {string} icon-name
         -->
         <slot name="left" :icon-name="leftIcon">
-          <UIcon v-if="leftIcon" internal color="inherit" :name="leftIcon" v-bind="leftIconAttrs" />
+          <UIcon v-if="leftIcon" internal color="gray" :name="leftIcon" v-bind="leftIconAttrs" />
         </slot>
       </span>
 
@@ -332,13 +332,7 @@ const {
           @binding {string} icon-name
         -->
         <slot name="right" :icon-name="rightIcon">
-          <UIcon
-            v-if="rightIcon"
-            internal
-            color="inherit"
-            :name="rightIcon"
-            v-bind="rightIconAttrs"
-          />
+          <UIcon v-if="rightIcon" internal color="gray" :name="rightIcon" v-bind="rightIconAttrs" />
         </slot>
       </div>
     </label>

package/ui.form-input/storybook/stories.ts

@@ -1,3 +1,4 @@
+import { computed } from "vue";
 import {
   getArgTypes,
   getSlotNames,
@@ -25,7 +26,8 @@ export default {
   title: "Form Inputs & Controls / Input",
   component: UInput,
   args: {
-    label: "Label",
+    label: "Full Name",
+    modelValue: "Satoshi Nakamoto",
   },
   argTypes: {
     ...getArgTypes(UInput.__name),
@@ -41,13 +43,19 @@ const DefaultTemplate: StoryFn<UInputArgs> = (args: UInputArgs) => ({
   components: { UInput, UIcon },
   setup() {
     const slots = getSlotNames(UInput.__name);
+    const errorMessage = computed(() =>
+      args.modelValue === "" && args.error !== ""
+        ? "This field is required. Please enter a value."
+        : "",
+    );
 
-    return { args, slots };
+    return { args, slots, errorMessage };
   },
   template: `
     <UInput
       v-bind="args"
       v-model="args.modelValue"
+      :error="errorMessage"
       class="max-w-96"
     >
       ${args.slotTemplate || getSlotsFragment("")}
@@ -61,15 +69,15 @@ const EnumVariantTemplate: StoryFn<UInputArgs> = (args: UInputArgs, { argTypes }
     function getDescription(option: string) {
       switch (option) {
         case "string":
-          return "Only letters are allowed";
+          return "Only letters are allowed.";
         case "number":
-          return "Numbers are allowed (including decimals)";
+          return "Numbers are allowed (including decimals).";
         case "integer":
-          return "Only integers are allowed";
+          return "Only integers are allowed.";
         case "stringAndNumber":
-          return "Letters and numbers are allowed";
+          return "Letters and numbers are allowed.";
         case "symbol":
-          return "Special characters are allowed";
+          return "Special characters are allowed.";
         default:
           return "";
       }
@@ -96,18 +104,18 @@ const EnumVariantTemplate: StoryFn<UInputArgs> = (args: UInputArgs, { argTypes }
         :key="index"
         v-bind="args"
         :[args.enum]="option"
-        :label="option"
-        :description="getDescription(option)"
+        :placeholder="args.enum === 'validationRule' ? '' : option"
+        :label="args.enum === 'validationRule' ? option : 'Full Name'"
+        :description="args.enum === 'validationRule' ? getDescription(option) : ''"
         class="max-w-96"
       />
 
       <UInput
         v-if="args.enum === 'validationRule'"
-        v-bind="args"
-        validation-rule="^#([a-fA-F0-9]{3,4}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$"
+        validation-rule="^#([a-fA-F0-9]{0,6}|[a-fA-F0-9]{0,8})$"
         label="Custom RegExp"
-        description="Enter a valid hex color code (e.g., #FF5733)"
-        labelAlign="topWithDesc"
+        description="Enter a valid hex color code (e.g., #FF5733)."
+        label-align="topWithDesc"
         placeholder="#FF5733"
         class="max-w-96"
       />
@@ -119,31 +127,39 @@ export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
 export const Placeholder = DefaultTemplate.bind({});
-Placeholder.args = { placeholder: "Type something here..." };
+Placeholder.args = { modelValue: "", placeholder: "Type something here...", error: "" };
 
 export const Description = DefaultTemplate.bind({});
 Description.args = { description: "Provide additional details if necessary." };
 
 export const Error = DefaultTemplate.bind({});
-Error.args = { error: "This field is required. Please enter a value." };
+Error.args = { modelValue: "" };
 
 export const Readonly = DefaultTemplate.bind({});
-Readonly.args = { readonly: true, modelValue: "Pre-filled content that cannot be changed" };
+Readonly.args = {
+  readonly: true,
+  label: "Readonly data",
+  modelValue: "Pre-filled content that cannot be changed",
+};
 
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };
 
 export const TypePassword = DefaultTemplate.bind({});
-TypePassword.args = { type: "password" };
+TypePassword.args = { label: "Password", modelValue: "donotforgetyourpassword", type: "password" };
 
 export const LabelPlacement = EnumVariantTemplate.bind({});
-LabelPlacement.args = { enum: "labelAlign" };
+LabelPlacement.args = { enum: "labelAlign", label: "Full Name", modelValue: "" };
 
 export const Sizes = EnumVariantTemplate.bind({});
-Sizes.args = { enum: "size" };
+Sizes.args = { enum: "size", modelValue: "" };
 
 export const ValidationRules = EnumVariantTemplate.bind({});
-ValidationRules.args = { enum: "validationRule", labelAlign: "topWithDesc" };
+ValidationRules.args = {
+  enum: "validationRule",
+  labelAlign: "topWithDesc",
+  modelValue: "",
+};
 ValidationRules.parameters = {
   docs: {
     description: {
@@ -161,13 +177,11 @@ export const IconProps: StoryFn<UInputArgs> = (args) => ({
   template: `
     <URow>
       <UInput
-        v-bind="args"
         left-icon="feedback"
         label="Your opinion"
         placeholder="Share your feedback with us"
       />
       <UInput
-        v-bind="args"
         right-icon="person"
         label="Username"
         placeholder="Enter your username"

package/ui.form-input/types.ts

@@ -18,7 +18,7 @@ export interface Props {
   /**
    * Label placement.
    */
-  labelAlign?: "top" | "topInside" | "topWithDesc" | "left" | "right";
+  labelAlign?: "topInside" | "top" | "topWithDesc" | "left" | "right";
 
   /**
    * Input placeholder.

package/ui.form-input-money/UInputMoney.vue

@@ -118,6 +118,7 @@ const { moneyInputAttrs } = useUI<Config>(defaultConfig);
     :label-align="labelAlign"
     :placeholder="placeholder"
     :description="description"
+    :readonly="readonly"
     :error="error"
     :disabled="disabled"
     inputmode="decimal"
@@ -130,16 +131,16 @@ const { moneyInputAttrs } = useUI<Config>(defaultConfig);
     @input="onInput"
   >
     <template #left>
-      <!-- 
-        @slot Use it to add something left. 
+      <!--
+        @slot Use it to add something left.
         @binding {string} icon-name
       -->
       <slot name="left" :icon-name="leftIcon" />
     </template>
 
     <template #right>
-      <!-- 
-        @slot Use it to add something right. 
+      <!--
+        @slot Use it to add something right.
         @binding {string} icon-name
       -->
       <slot name="right" :icon-name="leftIcon" />

package/ui.form-input-money/storybook/stories.ts

@@ -1,3 +1,4 @@
+import { computed } from "vue";
 import {
   getArgTypes,
   getSlotNames,
@@ -9,6 +10,8 @@ import UInputMoney from "../../ui.form-input-money/UInputMoney.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 URow from "../../ui.container-row/URow.vue";
+import UAvatar from "../../ui.image-avatar/UAvatar.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -23,7 +26,8 @@ export default {
   title: "Form Inputs & Controls / Input Money",
   component: UInputMoney,
   args: {
-    label: "Label",
+    label: "Expected amount",
+    modelValue: 245000.42,
   },
   argTypes: {
     ...getArgTypes(UInputMoney.__name),
@@ -39,13 +43,16 @@ const DefaultTemplate: StoryFn<UInputMoneyArgs> = (args: UInputMoneyArgs) => ({
   components: { UInputMoney, UIcon, UButton },
   setup() {
     const slots = getSlotNames(UInputMoney.__name);
+    const errorMessage = computed(() => (Number(args.modelValue) > 0 ? "" : args.error));
 
-    return { args, slots };
+    return { args, slots, errorMessage };
   },
   template: `
     <UInputMoney
       v-bind="args"
       v-model="args.modelValue"
+      :error="errorMessage"
+      class="max-w-96"
     >
       ${args.slotTemplate || getSlotsFragment("")}
     </UInputMoney>
@@ -55,89 +62,159 @@ const DefaultTemplate: StoryFn<UInputMoneyArgs> = (args: UInputMoneyArgs) => ({
 const EnumVariantTemplate: StoryFn<UInputMoneyArgs> = (args: UInputMoneyArgs, { argTypes }) => ({
   components: { UInputMoney, UCol },
   setup() {
+    let filteredOptions = argTypes?.[args.enum]?.options;
+
+    if (args.enum === "labelAlign") {
+      filteredOptions = argTypes?.[args.enum]?.options?.filter(
+        (item) => item !== "right" && item !== "topWithDesc",
+      );
+    }
+
     return {
       args,
-      options: argTypes?.[args.enum]?.options,
+      filteredOptions,
     };
   },
   template: `
     <UCol>
       <UInputMoney
-        v-for="(option, index) in options"
+        v-for="(option, index) in filteredOptions"
         :key="index"
-        v-bind="args"
         :[args.enum]="option"
-        :label="option"
+        label="Expected amount"
+        :placeholder="option"
+        class="max-w-96"
       />
     </UCol>
   `,
 });
 
 export const Default = DefaultTemplate.bind({});
-Default.args = { modelValue: 245000.42 };
+Default.args = {};
 
-export const Sizes = EnumVariantTemplate.bind({});
-Sizes.args = { enum: "size" };
+export const Placeholder = DefaultTemplate.bind({});
+Placeholder.args = { placeholder: "Enter amount in USD" };
 
-export const Symbol = DefaultTemplate.bind({});
-Symbol.args = { symbol: "€" };
+export const Description = DefaultTemplate.bind({});
+Description.args = { description: "Please enter the transaction amount." };
 
-export const LabelAlign = EnumVariantTemplate.bind({});
-LabelAlign.args = { enum: "labelAlign" };
+export const Error = DefaultTemplate.bind({});
+Error.args = {
+  modelValue: -245000.42,
+  error: "Invalid amount. Please enter a positive number with up to two decimal places.",
+};
 
-export const Placeholder = DefaultTemplate.bind({});
-Placeholder.args = { placeholder: "Placeholder" };
+export const ReadOnly = DefaultTemplate.bind({});
+ReadOnly.args = { readonly: true };
 
-export const Error = DefaultTemplate.bind({});
-Error.args = { error: "Some error." };
+export const Disabled = DefaultTemplate.bind({});
+Disabled.args = { disabled: true };
 
-export const Description = DefaultTemplate.bind({});
-Description.args = { description: "Some description." };
+export const Symbol = DefaultTemplate.bind({});
+Symbol.args = { symbol: "€" };
+
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size" };
 
-export const MinFractionDigits = DefaultTemplate.bind({});
-MinFractionDigits.args = { minFractionDigits: 2, maxFractionDigits: 4 };
+export const LabelAlign = EnumVariantTemplate.bind({});
+LabelAlign.args = { enum: "labelAlign" };
 
-export const MaxFractionDigits = DefaultTemplate.bind({});
-MaxFractionDigits.args = { maxFractionDigits: 4 };
+export const LimitFractionDigits = DefaultTemplate.bind({});
+LimitFractionDigits.args = {
+  minFractionDigits: 4,
+  maxFractionDigits: 6,
+  description: "You can enter from 4 to 6 decimal places.",
+};
+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 = { thousandsSeparator: "-" };
+ThousandsSeparator.parameters = {
+  docs: {
+    description: {
+      story: "A symbol used to separate the thousand parts of a number.",
+    },
+  },
+};
 
 export const PositiveOnly = DefaultTemplate.bind({});
 PositiveOnly.args = { positiveOnly: true };
+PositiveOnly.parameters = {
+  docs: {
+    description: {
+      story: "Allow only positive values.",
+    },
+  },
+};
 
 export const Prefix = DefaultTemplate.bind({});
 Prefix.args = { prefix: "+" };
+Prefix.parameters = {
+  docs: {
+    description: {
+      story: "Prefix to display before input value.",
+    },
+  },
+};
 
-export const ReadOnly = DefaultTemplate.bind({});
-ReadOnly.args = { readonly: true };
-
-export const Disabled = DefaultTemplate.bind({});
-Disabled.args = { disabled: true };
-
-export const LeftIcon = DefaultTemplate.bind({});
-LeftIcon.args = { leftIcon: "star" };
-
-export const RightIcon = DefaultTemplate.bind({});
-RightIcon.args = { rightIcon: "star" };
-
-export const LeftSlot = DefaultTemplate.bind({});
-LeftSlot.args = {
-  slotTemplate: `
-    <template #left>
-      <UButton variant="thirdary" filled square label="Filter" class="rounded-r-none h-full" />
-    </template>
+export const IconProps: StoryFn<UInputMoneyArgs> = (args) => ({
+  components: { UInputMoney, URow },
+  setup() {
+    return { args };
+  },
+  template: `
+    <URow>
+      <UInputMoney
+        left-icon="payments"
+        label="Annual payment"
+        placeholder="Enter your annual payment"
+      />
+      <UInputMoney
+        right-icon="currency_exchange"
+        label="Total amount"
+        symbol="£"
+        placeholder="Enter the amount you want to exchange"
+      />
+    </URow>
   `,
-};
+});
 
-export const RightSlot = DefaultTemplate.bind({});
-RightSlot.args = {
-  slotTemplate: `
-    <template #right>
-      <UButton variant="thirdary" filled square label="Filter" class="rounded-l-none" />
-    </template>
+export const Slots: StoryFn<UInputMoneyArgs> = (args) => ({
+  components: { UInputMoney, URow, UButton, UAvatar },
+  setup() {
+    return { args };
+  },
+  template: `
+    <URow no-mobile>
+      <UInputMoney v-bind="args">
+        <template #left>
+          <UAvatar />
+        </template>
+      </UInputMoney>
+
+      <UInputMoney v-bind="args" :config="{ moneyInput: { rightSlot: 'pr-0' } }">
+        <template #right>
+          <UButton label="Calculate" size="sm" class="rounded-l-none h-full" />
+        </template>
+      </UInputMoney>
+    </URow>
   `,
-};
+});

package/ui.form-input-number/storybook/stories.ts

@@ -7,13 +7,14 @@ import {
 
 import UInputNumber from "../../ui.form-input-number/UInputNumber.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 { UInputNumberProps } from "../types.ts";
 
 interface UInputNumberArgs extends UInputNumberProps {
   slotTemplate?: string;
-  enum: "size";
+  enum: "size" | "labelAlign";
 }
 
 export default {
@@ -22,6 +23,7 @@ export default {
   component: UInputNumber,
   args: {
     modelValue: 1,
+    label: "Choose the number of items",
   },
   argTypes: {
     ...getArgTypes(UInputNumber.__name),
@@ -34,7 +36,7 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<UInputNumberArgs> = (args: UInputNumberArgs) => ({
-  components: { UInputNumber },
+  components: { UInputNumber, UBadge },
   setup() {
     const slots = getSlotNames(UInputNumber.__name);
 
@@ -55,24 +57,14 @@ const EnumVariantTemplate: StoryFn<UInputNumberArgs> = (args: UInputNumberArgs,
       options: argTypes?.[args.enum]?.options,
     };
   },
-  data() {
-    return {
-      sizeValues: [
-        { count: 1, label: "sm" },
-        { count: 1, label: "md" },
-        { count: 1, label: "lg" },
-      ],
-    };
-  },
   template: `
     <UCol gap="xl">
       <UInputNumber
         v-for="(option, index) in options"
         :key="index"
         v-bind="args"
-        v-model="sizeValues[index].count"
+        :label="option"
         :[args.enum]="option"
-        :label="sizeValues[index].label"
       />
     </UCol>
   `,
@@ -81,15 +73,19 @@ const EnumVariantTemplate: StoryFn<UInputNumberArgs> = (args: UInputNumberArgs,
 export const Default = DefaultTemplate.bind({});
 Default.args = { step: 1, min: 1, max: 100 };
 
-export const Label = DefaultTemplate.bind({});
-Label.args = {
-  modelValue: 1,
-  step: 1,
-  min: 1,
-  max: 100,
-  label: "Year",
+export const Description = DefaultTemplate.bind({});
+Description.args = {
+  label: "Choose your storage capacity (in GB)",
+  description: "Storage capacity may not exceed 40 GB.",
+  max: 40,
 };
 
+export const Error = DefaultTemplate.bind({});
+Error.args = { modelValue: NaN, error: "Passed value has incorrect format." };
+
+export const Disabled = DefaultTemplate.bind({});
+Disabled.args = { disabled: true };
+
 export const Sizes = EnumVariantTemplate.bind({});
 Sizes.args = {
   enum: "size",
@@ -99,14 +95,24 @@ Sizes.args = {
   max: 100,
 };
 
+export const LabelPlacement = EnumVariantTemplate.bind({});
+LabelPlacement.args = { enum: "labelAlign", description: "You may configure step value." };
+
 export const ValueLimit = DefaultTemplate.bind({});
 ValueLimit.args = {
-  modelValue: 1,
+  modelValue: 7,
   step: 1,
   min: 5,
   max: 10,
   label: "Min is 5 | Max is 10",
 };
+ValueLimit.parameters = {
+  docs: {
+    description: {
+      story: "To set the minimum and maximum values, use the `min` and `max` props.",
+    },
+  },
+};
 
 export const Step = DefaultTemplate.bind({});
 Step.args = {
@@ -116,3 +122,19 @@ Step.args = {
   max: 100,
   label: "Step is 5",
 };
+Step.parameters = {
+  docs: {
+    description: {
+      story: "`step` prop determines the increment/decrement value.",
+    },
+  },
+};
+
+export const SlotLabel = DefaultTemplate.bind({});
+SlotLabel.args = {
+  slotTemplate: `
+    <template #label="{ label }">
+      <UBadge :label="label" />
+    </template>
+  `,
+};

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

@@ -71,6 +71,7 @@ const { config, inputLabelAttrs, containerAttrs, counterAttrs, totalAttrs, stars
     :size="size"
     :align="labelAlign"
     :description="description"
+    :disabled="disabled"
     v-bind="inputLabelAttrs"
     :data-test="dataTest"
   >

package/ui.form-input-rating/config.ts

@@ -13,6 +13,11 @@ export default /*tw*/ {
   stars: "flex",
   star: {
     base: "{UIcon}",
+    variants: {
+      disabled: {
+        true: "text-gray-400 pointer-events-none",
+      },
+    },
     defaults: {
       size: {
         sm: "xs",

package/ui.form-input-rating/storybook/stories.ts

@@ -1,3 +1,4 @@
+import { computed } from "vue";
 import {
   getArgTypes,
   getSlotNames,
@@ -6,14 +7,15 @@ import {
 } from "../../utils/storybook.ts";
 
 import UInputRating from "../../ui.form-input-rating/UInputRating.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 UInputRatingArgs extends Props {
   slotTemplate?: string;
-  enum: "size";
+  enum: "size" | "labelAlign";
 }
 
 export default {
@@ -22,7 +24,7 @@ export default {
   component: UInputRating,
   args: {
     modelValue: 2,
-    label: "Label",
+    label: "Rate your experience: ",
   },
   argTypes: {
     ...getArgTypes(UInputRating.__name),
@@ -35,16 +37,20 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<UInputRatingArgs> = (args: UInputRatingArgs) => ({
-  components: { UInputRating },
+  components: { UInputRating, UBadge },
   setup() {
     const slots = getSlotNames(UInputRating.__name);
+    const errorMessage = computed(() =>
+      !args.modelValue && args.error !== "" ? "Your review helps us improve our services." : "",
+    );
 
-    return { args, slots };
+    return { args, slots, errorMessage };
   },
   template: `
     <UInputRating
       v-bind="args"
       v-model="args.modelValue"
+      :error="errorMessage"
     >
       ${args.slotTemplate || getSlotsFragment("")}
     </UInputRating>
@@ -52,7 +58,7 @@ const DefaultTemplate: StoryFn<UInputRatingArgs> = (args: UInputRatingArgs) => (
 });
 
 const EnumVariantTemplate: StoryFn<UInputRatingArgs> = (args: UInputRatingArgs, { argTypes }) => ({
-  components: { UInputRating, URow },
+  components: { UInputRating, UCol },
   setup() {
     return {
       args,
@@ -60,47 +66,84 @@ const EnumVariantTemplate: StoryFn<UInputRatingArgs> = (args: UInputRatingArgs,
     };
   },
   template: `
-    <URow gap="2xl">
+    <UCol>
       <UInputRating
         v-for="(option, index) in options"
         :key="index"
         v-bind="args"
         v-model="args.modelValue"
         :[args.enum]="option"
+        :description="option"
+        modelValue="2"
       />
-    </URow>
+    </UCol>
   `,
 });
 
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const Description = DefaultTemplate.bind({});
+Description.args = { description: "Your review helps us improve our services." };
+
+export const Error = DefaultTemplate.bind({});
+Error.args = { selectable: true, modelValue: NaN };
+
+export const Disabled = DefaultTemplate.bind({});
+Disabled.args = { disabled: true };
+
 export const Sizes = EnumVariantTemplate.bind({});
 Sizes.args = { enum: "size" };
 
+export const LabelPlacement = EnumVariantTemplate.bind({});
+LabelPlacement.args = { enum: "labelAlign" };
+
 export const StarAmount = DefaultTemplate.bind({});
-StarAmount.args = { modelValue: 4, stars: 7 };
+StarAmount.args = { stars: 7 };
+StarAmount.parameters = {
+  docs: {
+    description: {
+      story: "You can set the amount of stars to display via the `stars` prop.",
+    },
+  },
+};
 
 export const Selectable = DefaultTemplate.bind({});
 Selectable.args = { selectable: true };
-
-export const Description = DefaultTemplate.bind({});
-Description.args = { description: "Some description" };
-
-export const Error = DefaultTemplate.bind({});
-Error.args = { error: "Some error" };
+Selectable.parameters = {
+  docs: {
+    description: {
+      story: "If you want to allow users to select a rating, set the `selectable` prop to `true`.",
+    },
+  },
+};
 
 export const WithCounter = DefaultTemplate.bind({});
-WithCounter.args = { counter: true };
+WithCounter.args = { counter: true, selectable: true };
+WithCounter.parameters = {
+  docs: {
+    description: {
+      story:
+        "You can display a counter of the current rating by setting the `counter` prop to `true`.",
+    },
+  },
+};
 
 export const WithTotal = DefaultTemplate.bind({});
 WithTotal.args = { total: 250 };
+WithTotal.parameters = {
+  docs: {
+    description: {
+      story: "You can display the total amount of reviews by setting the `total` prop to a number.",
+    },
+  },
+};
 
 export const SlotCounter = DefaultTemplate.bind({});
 SlotCounter.args = {
   slotTemplate: `
-    <template #counter="{counter}">
-      Rating: {{counter}}
+    <template #counter="{ counter }">
+      <UBadge :label="'Current rating is: ' + String(counter)" color="green" />
     </template>
   `,
 };
@@ -110,7 +153,7 @@ SlotTotal.args = {
   total: 250,
   slotTemplate: `
     <template #total="{total}">
-      ({{total}}) reviews
+      <UBadge :label="'Total reviews: ' + String(total)" color="green" />
     </template>
   `,
 };

package/ui.form-input-rating/types.ts

@@ -5,11 +5,21 @@ import type { ComponentConfig } from "../types.ts";
 export type Config = typeof defaultConfig;
 
 export interface Props {
+  /**
+   * Rating label.
+   */
+  label?: string;
+
   /**
    * Rating value.
    */
   modelValue: number;
 
+  /**
+   * Rating description.
+   */
+  description?: string;
+
   /**
    * Rating number of stars.
    */
@@ -20,11 +30,6 @@ export interface Props {
    */
   size?: "sm" | "md" | "lg";
 
-  /**
-   * Rating label.
-   */
-  label?: string;
-
   /**
    * Rating label placement.
    */
@@ -36,9 +41,9 @@ export interface Props {
   error?: string;
 
   /**
-   * Rating description.
+   * Disable the input.
    */
-  description?: string;
+  disabled?: boolean;
 
   /**
    * Rating total.

package/ui.form-input-search/UInputSearch.vue

@@ -168,6 +168,7 @@ const {
           v-if="!searchButtonLabel"
           internal
           interactive
+          color="gray"
           :name="rightIcon || config.defaults.searchIcon"
           v-bind="searchIconAttrs"
           :data-test="`${dataTest}-search-icon`"

package/ui.form-input-search/config.ts

@@ -4,18 +4,13 @@ export default /*tw*/ {
     base: "{UInput} {>searchInput}",
     rightSlot: "pr-0",
   },
-  clearIcon: {
+  inputIcon: {
     base: "{UIcon}",
-    defaults: {
-      size: {
-        sm: "xs",
-        md: "sm",
-        lg: "md",
+    variants: {
+      disabled: {
+        true: "text-gray-400 pointer-events-none",
       },
     },
-  },
-  searchIcon: {
-    base: "{UIcon}",
     defaults: {
       size: {
         sm: "xs",
@@ -24,13 +19,15 @@ export default /*tw*/ {
       },
     },
   },
+  clearIcon: "{>inputIcon}",
+  searchIcon: "{>inputIcon}",
   searchButton: {
     base: "{UButton} rounded-l-none ml-1 outline outline-1 outline-gray-900",
     defaults: {
       size: {
         sm: "xs",
-        md: "md",
-        lg: "lg",
+        md: "sm",
+        lg: "md",
       },
     },
   },

package/ui.form-input-search/storybook/stories.ts

@@ -1,3 +1,4 @@
+import { computed } from "vue";
 import {
   getArgTypes,
   getSlotNames,
@@ -8,14 +9,17 @@ import {
 import UInputSearch from "../../ui.form-input-search/UInputSearch.vue";
 import UButton from "../../ui.button/UButton.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
+import UCol from "../../ui.container-col/UCol.vue";
 import URow from "../../ui.container-row/URow.vue";
+import UAvatar from "../../ui.image-avatar/UAvatar.vue";
+import UBadge from "../../ui.text-badge/UBadge.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
 
 interface UInputSearchArgs extends Props {
   slotTemplate?: string;
-  enum: "size";
+  enum: "size" | "labelAlign";
 }
 
 export default {
@@ -25,6 +29,9 @@ export default {
   argTypes: {
     ...getArgTypes(UInputSearch.__name),
   },
+  args: {
+    modelValue: "Which UI library is the best?",
+  },
   parameters: {
     docs: {
       ...getDocsDescription(UInputSearch.__name),
@@ -36,70 +43,142 @@ const DefaultTemplate: StoryFn<UInputSearchArgs> = (args: UInputSearchArgs) => (
   components: { UInputSearch, UButton, UIcon },
   setup() {
     const slots = getSlotNames(UInputSearch.__name);
+    const errorMessage = computed(() =>
+      args.modelValue === "" && args.error !== ""
+        ? "This field is required. Please enter a value."
+        : "",
+    );
 
-    return { args, slots };
+    return { args, slots, errorMessage };
   },
   template: `
-    <UInputSearch v-bind="args" v-model="args.modelValue">
+    <UInputSearch
+      v-bind="args"
+      v-model="args.modelValue"
+      :error="errorMessage"
+      class="max-w-96"
+    >
       ${args.slotTemplate || getSlotsFragment("")}
     </UInputSearch>
   `,
 });
 
 const EnumVariantTemplate: StoryFn<UInputSearchArgs> = (args: UInputSearchArgs, { argTypes }) => ({
-  components: { UInputSearch, URow },
+  components: { UInputSearch, UCol },
   setup() {
+    let filteredOptions = argTypes?.[args.enum]?.options;
+
+    if (args.enum === "labelAlign") {
+      filteredOptions = argTypes?.[args.enum]?.options?.filter(
+        (item) => item !== "right" && item !== "topWithDesc",
+      );
+    }
+
     return {
       args,
-      options: argTypes?.[args.enum]?.options,
+      filteredOptions,
     };
   },
   template: `
-    <URow>
+    <UCol>
       <UInputSearch
-        v-for="(option, index) in options"
+        v-for="(option, index) in filteredOptions"
         :key="index"
         v-bind="args"
         v-model="args.modelValue"
         :[args.enum]="option"
+        :placeholder="option"
+        class="max-w-96"
       >
       </UInputSearch>
-    </URow>
+    </UCol>
   `,
 });
 
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const SearchButton = DefaultTemplate.bind({});
-SearchButton.args = { searchButtonLabel: "Search" };
+export const Label = DefaultTemplate.bind({});
+Label.args = { label: "Search for product or brand" };
 
-export const MinLength = DefaultTemplate.bind({});
-MinLength.args = { minLength: 4 };
+export const Placeholder = DefaultTemplate.bind({});
+Placeholder.args = { modelValue: "", placeholder: "Type to search...", error: "" };
+
+export const Description = DefaultTemplate.bind({});
+Description.args = { description: "Search for additional details." };
+
+export const Error = DefaultTemplate.bind({});
+Error.args = { modelValue: "" };
+
+export const Disabled = DefaultTemplate.bind({});
+Disabled.args = { disabled: true };
 
 export const Sizes = EnumVariantTemplate.bind({});
-Sizes.args = { enum: "size" };
+Sizes.args = { enum: "size", modelValue: "" };
 
-export const LeftIcon = DefaultTemplate.bind({});
-LeftIcon.args = { leftIcon: "star" };
+export const LabelPlacement = EnumVariantTemplate.bind({});
+LabelPlacement.args = { enum: "labelAlign", modelValue: "", label: "Search for product or brand" };
 
-export const RightIcon = DefaultTemplate.bind({});
-RightIcon.args = { rightIcon: "star" };
+export const SearchButton = DefaultTemplate.bind({});
+SearchButton.args = { searchButtonLabel: "Search" };
+SearchButton.parameters = {
+  docs: {
+    description: {
+      story:
+        // eslint-disable-next-line vue/max-len
+        "`searchButtonLabel` prop shows a button with a passed label instead of the default search icon. When clicked, it triggers the search event.",
+    },
+  },
+};
 
-export const LeftSlot = DefaultTemplate.bind({});
-LeftSlot.args = {
-  slotTemplate: `
-    <template #left>
-      <UIcon name="star" />
-    </template>
-  `,
+export const MinLength = DefaultTemplate.bind({});
+MinLength.args = { minLength: 4 };
+MinLength.parameters = {
+  docs: {
+    description: {
+      story:
+        "Determines minimum character length for search. If not met, search event is not fired.",
+    },
+  },
 };
 
-export const RightSlot = DefaultTemplate.bind({});
-RightSlot.args = {
-  slotTemplate: `
-    <template #right>
-      <UIcon name="star" />
-    </template>
+export const IconProps: StoryFn<UInputSearchArgs> = (args) => ({
+  components: { UInputSearch, URow },
+  setup() {
+    return { args };
+  },
+  template: `
+    <URow>
+      <UInputSearch
+        left-icon="travel_explore"
+        placeholder="Search for a travel destination"
+      />
+      <UInputSearch
+        right-icon="person_search"
+        placeholder="Search for a person"
+      />
+    </URow>
   `,
-};
+});
+
+export const Slots: StoryFn<UInputSearchArgs> = (args) => ({
+  components: { UInputSearch, URow, UButton, UAvatar, UBadge },
+  setup() {
+    return { args };
+  },
+  template: `
+    <URow no-mobile>
+      <UInputSearch v-bind="args" :config="{ searchInput: { leftSlot: 'pl-0' } }">
+        <template #left>
+          <UAvatar size="sm" />
+        </template>
+      </UInputSearch>
+
+      <UInputSearch v-bind="args" :config="{ searchInput: { rightSlot: 'pr-0' } }">
+        <template #right>
+          <UBadge label="Search" size="sm" color="green" />
+        </template>
+      </UInputSearch>
+    </URow>
+  `,
+});

package/ui.form-input-search/types.ts

@@ -5,6 +5,11 @@ import type { ComponentConfig } from "../types.ts";
 export type Config = typeof defaultConfig;
 
 export interface Props {
+  /**
+   * Input label.
+   */
+  label?: string;
+
   /**
    * Search input value.
    */
@@ -23,12 +28,7 @@ export interface Props {
   /**
    * Label placement.
    */
-  labelAlign?: "top" | "topInside" | "topWithDesc" | "left" | "right";
-
-  /**
-   * Input label.
-   */
-  label?: string;
+  labelAlign?: "topInside" | "top" | "topWithDesc" | "left" | "right";
 
   /**
    * Input description.