vueless 1.4.7-beta.0 → 1.4.7-beta.2

package/ui.form-date-picker-range/storybook/stories.ts

@@ -15,6 +15,7 @@ import UCol from "../../ui.container-col/UCol.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import UButton from "../../ui.button/UButton.vue";
 import UText from "../../ui.text-block/UText.vue";
+import ULink from "../../ui.button-link/ULink.vue";
 
 import { addDays } from "../../ui.form-calendar/utilDate";
 
@@ -296,44 +297,102 @@ export const IconProps: StoryFn<DefaultUDatePickerRangeArgs> = (args) => ({
 });
 
 export const Slots: StoryFn<DefaultUDatePickerRangeArgs> = (args) => ({
-  components: { UDatePickerRange, URow, UButton },
-  setup: () => ({ args, fromDate, toDate, leftModel: ref({ from: null, to: null }) }),
+  components: { UDatePickerRange, URow, UCol, UButton, UText, ULink, UIcon },
+  setup: () => ({
+    args,
+    fromDate,
+    toDate,
+    leftModel: ref({ from: null, to: null }),
+    descriptionSlotValue: ref({ from: fromDate, to: toDate }),
+    errorSlotValue: ref({ from: null, to: null }),
+  }),
   template: `
-    <URow align="stretch">
-      <UDatePickerRange
-        label="Select date range"
-        v-model="leftModel"
-        variant="input"
-        class="w-full"
-        :config="{ datepickerInput: { wrapper: 'pl-0' } }"
-      >
-        <template #left>
-          <UButton
-            label="2 weeks"
-            size="sm"
-            variant="soft"
-            class="h-full rounded-r-none"
-            @click="leftModel = { from: fromDate, to: toDate }"
-          />
-        </template>
-      </UDatePickerRange>
-      <UDatePickerRange
-        label="Select date range"
-        v-model="args.modelValue"
-        variant="input"
-        class="w-full"
-        :config="{ datepickerInput: { wrapper: 'pr-0' } }"
-      >
-        <template #right>
-          <UButton
-            label="Clear"
-            size="sm"
-            variant="ghost"
-            class="h-full rounded-l-none"
-            @click="args.modelValue = { from: null, to: null }"
-          />
-        </template>
-      </UDatePickerRange>
-    </URow>
+    <UCol gap="3xl">
+      <URow block>
+        <UDatePickerRange
+          label="Select date range"
+          v-model="leftModel"
+          variant="input"
+          class="w-full"
+          :config="{ datepickerInput: { wrapper: 'pl-0' } }"
+        >
+          <template #left>
+            <UButton
+              label="2 weeks"
+              size="sm"
+              variant="soft"
+              class="h-full rounded-r-none"
+              @click="leftModel = { from: fromDate, to: toDate }"
+            />
+          </template>
+        </UDatePickerRange>
+        <UDatePickerRange
+          label="Select date range"
+          v-model="args.modelValue"
+          variant="input"
+          class="w-full"
+          :config="{ datepickerInput: { wrapper: 'pr-0' } }"
+        >
+          <template #right>
+            <UButton
+              label="Clear"
+              size="sm"
+              variant="ghost"
+              class="h-full rounded-l-none"
+              @click="args.modelValue = { from: null, to: null }"
+            />
+          </template>
+        </UDatePickerRange>
+      </URow>
+
+      <URow block>
+        <UDatePickerRange
+          v-bind="args"
+          v-model="descriptionSlotValue"
+          variant="input"
+          label="Report period"
+          class="w-full"
+        >
+          <template #description>
+            <URow align="center" gap="2xs" class="text-neutral">
+              <UIcon name="date_range" size="xs" color="primary" />
+              <UText size="sm">
+                Inclusive of start and end.
+                <ULink label="Fiscal calendar" underlined size="sm" />.
+              </UText>
+            </URow>
+          </template>
+        </UDatePickerRange>
+
+        <UDatePickerRange
+          v-bind="args"
+          v-model="errorSlotValue"
+          variant="input"
+          label="Stay dates"
+          :error="true"
+          class="w-full"
+        >
+          <template #error>
+            <URow align="center" gap="2xs">
+              <UIcon name="error" size="xs" color="error" />
+              <UText size="sm" color="error">
+                <ul>
+                  <li>End date must be after the start date</li>
+                  <li>Range cannot span more than 30 days</li>
+                  <li>Select both dates from the calendar</li>
+                </ul>
+              </UText>
+            </URow>
+          </template>
+        </UDatePickerRange>
+      </URow>
+    </UCol>
   `,
 });
+Slots.parameters = {
+  docs: {
+    story: {
+      height: "700px",
+    },
+  },
+};

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

@@ -13,6 +13,7 @@ import URow from "../../ui.container-row/URow.vue";
 import UDropdownButton from "../../ui.dropdown-button/UDropdownButton.vue";
 import UText from "../../ui.text-block/UText.vue";
 import UChip from "../../ui.other-chip/UChip.vue";
+import ULink from "../../ui.button-link/ULink.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types";
@@ -190,7 +191,7 @@ export const IconProps: StoryFn<UInputArgs> = (args) => ({
 });
 
 export const Slots: StoryFn<UInputArgs> = (args) => ({
-  components: { UInput, URow, UDropdownButton, UText, UChip },
+  components: { UInput, URow, UCol, UDropdownButton, UText, UChip, ULink, UIcon },
   setup() {
     const countryCodes = [
       { label: "+33", value: "+33" },
@@ -199,50 +200,87 @@ export const Slots: StoryFn<UInputArgs> = (args) => ({
     ];
 
     const countryCode = ref("+33");
+    const descriptionSlotValue = ref("");
+    const errorSlotValue = ref("");
 
-    return { args, countryCode, countryCodes };
+    return { args, countryCode, countryCodes, descriptionSlotValue, errorSlotValue };
   },
   template: `
-    <URow>
-      <UInput
-        label="Phone Number"
-        placeholder="Enter your phone number"
-        :config="{ wrapper: 'pl-0' }"
-      >
-        <template #label="{ label }">
-          {{ label }}
-          <span class="text-red-500">*</span>
-        </template>
-
-        <template #left>
-          <UDropdownButton
-            v-model="countryCode"
-            :options="countryCodes"
-            square
-            size="sm"
-            variant="soft"
-            class="rounded-r-none h-[49px]"
-          />
-        </template>
-      </UInput>
-
-      <UInput label="Website" placeholder="Enter your website">
-        <template #label="{ label }">
-          {{ label }}
-          <span class="text-red-500">*</span>
-        </template>
-
-        <template #right>
-          <UText label=".com" variant="lifted" />
-        </template>
-      </UInput>
-    </URow>
+    <UCol gap="3xl">
+      <URow block>
+        <UInput
+          label="Phone Number"
+          placeholder="Enter your phone number"
+          :config="{ wrapper: 'pl-0' }"
+        >
+          <template #label="{ label }">
+            {{ label }}
+            <span class="text-red-500">*</span>
+          </template>
+
+          <template #left>
+            <UDropdownButton
+              v-model="countryCode"
+              :options="countryCodes"
+              square
+              size="sm"
+              variant="soft"
+              class="rounded-r-none h-[49px]"
+            />
+          </template>
+        </UInput>
+
+        <UInput label="Website" placeholder="Enter your website">
+          <template #label="{ label }">
+            {{ label }}
+            <span class="text-red-500">*</span>
+          </template>
+
+          <template #right>
+            <UText label=".com" variant="lifted" :wrap="false" />
+          </template>
+        </UInput>
+      </URow>
+
+      <URow block>
+        <UInput v-model="descriptionSlotValue" label="Display name">
+          <template #description>
+            <URow align="center" gap="2xs" class="text-neutral">
+              <UIcon name="info" size="xs" color="primary" />
+              <UText size="sm">
+                Shown on your public profile. Read the
+                <ULink label="naming policy" underlined size="sm" />.
+              </UText>
+            </URow>
+          </template>
+        </UInput>
+
+        <UInput
+          v-model="errorSlotValue"
+          label="Name"
+          :error="true"
+        >
+          <template #error>
+            <URow align="center" gap="2xs">
+              <UIcon name="error" size="xs" color="error" />
+              <UText size="sm" color="error">
+                <ul>
+                  <li>This field failed validation</li>
+                  <li>Check minimum and maximum length rules</li>
+                  <li>Only allowed characters may be used</li>
+                </ul>
+              </UText>
+            </URow>
+          </template>
+        </UInput>
+      </URow>
+    </UCol>
   `,
 });
 Slots.parameters = {
   docs: {
     story: {
-      height: "250px",
+      height: "300px",
     },
   },
 };

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

@@ -14,6 +14,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 UText from "../../ui.text-block/UText.vue";
+import ULink from "../../ui.button-link/ULink.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types";
@@ -109,15 +110,17 @@ LabelSlot.args = {
 };
 
 export const Slots: StoryFn<UInputFileArgs> = (args) => ({
-  components: { UInputFile, UCol, UBadge, UIcon, URow, UText },
+  components: { UInputFile, UCol, UBadge, UIcon, URow, UText, ULink },
   setup() {
-    return { args };
+    const files = ref<File[]>([]);
+
+    return { args, files };
   },
   template: `
     <UCol gap="xl">
       <UInputFile
         v-bind="args"
-        v-model="args.files"
+        v-model="files"
         label="Top Slot"
         :allowedFileTypes="['.jpeg', '.png']"
         :maxFileSize="2"
@@ -132,7 +135,7 @@ export const Slots: StoryFn<UInputFileArgs> = (args) => ({
 
       <UInputFile
         v-bind="args"
-        v-model="args.files"
+        v-model="files"
         label="Left Slot"
         :allowedFileTypes="['.pdf', '.doc', '.docx']"
       >
@@ -146,7 +149,7 @@ export const Slots: StoryFn<UInputFileArgs> = (args) => ({
 
       <UInputFile
         v-bind="args"
-        v-model="args.files"
+        v-model="files"
         label="Bottom Slot"
         multiple
         :allowedFileTypes="['.png', '.jpeg']"
@@ -158,6 +161,42 @@ export const Slots: StoryFn<UInputFileArgs> = (args) => ({
           </URow>
         </template>
       </UInputFile>
+
+      <UInputFile
+        v-bind="args"
+        v-model="files"
+        label="Upload document"
+      >
+        <template #description>
+          <URow align="center" gap="2xs">
+            <UIcon name="description" size="xs" color="primary" />
+            <UText size="sm">
+              PDF or image, max 5MB.
+              <ULink label="See requirements" underlined size="sm" />.
+            </UText>
+          </URow>
+        </template>
+      </UInputFile>
+
+      <UInputFile
+        v-bind="args"
+        v-model="files"
+        label="Upload document"
+        :error="true"
+      >
+        <template #error>
+          <URow align="center" gap="2xs">
+            <UIcon name="error" size="xs" color="error" />
+            <UText size="sm" color="error">
+              <ul>
+                <li>File type is not accepted for this field</li>
+                <li>Maximum file size has been exceeded</li>
+                <li>Choose another file and upload again</li>
+              </ul>
+            </UText>
+          </URow>
+        </template>
+      </UInputFile>
     </UCol>
   `,
 });

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

@@ -14,6 +14,7 @@ import UButton from "../../ui.button/UButton.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UDropdownButton from "../../ui.dropdown-button/UDropdownButton.vue";
 import UText from "../../ui.text-block/UText.vue";
+import ULink from "../../ui.button-link/ULink.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types";
@@ -200,7 +201,7 @@ export const IconProps: StoryFn<UInputNumberArgs> = (args) => ({
 });
 
 export const Slots: StoryFn<UInputNumberArgs> = (args) => ({
-  components: { UInputNumber, URow, UButton, UDropdownButton, UText },
+  components: { UInputNumber, URow, UCol, UButton, UDropdownButton, UText, ULink, UIcon },
   setup() {
     const currencies = [
       { label: "USD", value: "usd" },
@@ -209,42 +210,79 @@ export const Slots: StoryFn<UInputNumberArgs> = (args) => ({
     ];
 
     const currency = ref("usd");
+    const descriptionSlotValue = ref(0);
+    const errorSlotValue = ref(null);
 
-    return { args, currency, currencies };
+    return { args, currency, currencies, descriptionSlotValue, errorSlotValue };
   },
   template: `
-    <URow class="gap-4">
-      <UInputNumber
-        label="Left slot"
-        placeholder="Enter discount amount"
-        :config="{ numberInput: { wrapper: 'pl-0' } }"
-      >
-        <template #left>
-          <UDropdownButton
-            v-model="currency"
-            :options="currencies"
-            size="sm"
-            variant="soft"
-            class="rounded-r-none h-[49px]"
-          />
-        </template>
-      </UInputNumber>
+    <UCol gap="3xl">
+      <URow block>
+        <UInputNumber
+          label="Left slot"
+          placeholder="Enter discount amount"
+          :config="{ numberInput: { wrapper: 'pl-0' } }"
+        >
+          <template #left>
+            <UDropdownButton
+              v-model="currency"
+              :options="currencies"
+              size="sm"
+              variant="soft"
+              class="rounded-r-none h-[49px]"
+            />
+          </template>
+        </UInputNumber>
 
-      <UInputNumber
-        label="Right slot"
-        placeholder="Enter your annual payment"
-      >
-        <template #right>
-          <UText label="%, per year" variant="lifted" size="sm" :wrap="false" />
-        </template>
-      </UInputNumber>
-    </URow>
+        <UInputNumber
+          label="Right slot"
+          placeholder="Enter your annual payment"
+        >
+          <template #right>
+            <UText label="%, per year" variant="lifted" size="sm" :wrap="false" />
+          </template>
+        </UInputNumber>
+      </URow>
+
+      <URow block>
+        <UInputNumber v-model="descriptionSlotValue" label="Amount">
+          <template #description>
+            <URow align="center" gap="2xs" class="text-neutral">
+              <UIcon name="payments" size="xs" color="primary" />
+              <UText size="sm">
+                Net amount in
+                <ULink label="account currency" underlined size="sm" />.
+              </UText>
+            </URow>
+          </template>
+        </UInputNumber>
+
+        <UInputNumber
+          v-model="errorSlotValue"
+          label="Amount"
+          :error="true"
+        >
+          <template #error>
+            <URow align="center" gap="2xs">
+              <UIcon name="error" size="xs" color="error" />
+              <UText size="sm" color="error">
+                <ul>
+                  <li>Value is outside the allowed range</li>
+                  <li>Use up to two decimal places for this currency</li>
+                  <li>Enter a number greater than zero</li>
+                </ul>
+              </UText>
+            </URow>
+          </template>
+        </UInputNumber>
+      </URow>
+    </UCol>
   `,
 });
 Slots.parameters = {
   docs: {
     story: {
-      height: "250px",
+      height: "300px",
     },
   },
 };