Merge pull request #352 from vuelessjs/VL-133_Input-group-stories-ref…

…inement_Vitalii-Dudnik VL-133_Input-group-stories-refinement_Vitalii-Dudnik
vuelessjs · Jan 27, 2025 · eddc722 · eddc722
2 parents 4c54e2e + 9c227ab
commit eddc722
Show file tree

Hide file tree

Showing 14 changed files with 418 additions and 179 deletions.
diff --git a/src/ui.form-input-money/UInputMoney.vue b/src/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" />

diff --git a/src/ui.form-input-money/storybook/stories.ts b/src/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>
   `,
-};
+});