vueless 0.0.702 → 0.0.704

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`"
@@ -177,7 +178,6 @@ const {
         <UButton
           v-if="searchButtonLabel"
           :label="searchButtonLabel"
-          :ring="false"
           v-bind="searchButtonAttrs"
           :data-test="`${dataTest}-search-button`"
           @click="onClickSearch"