vueless 1.4.7-beta.1 → 1.4.7-beta.2

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",
     },
   },
 };

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

@@ -10,6 +10,9 @@ import {
 
 import UInputPassword from "../UInputPassword.vue";
 import UCol from "../../ui.container-col/UCol.vue";
+import UText from "../../ui.text-block/UText.vue";
+import ULink from "../../ui.button-link/ULink.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UButton from "../../ui.button/UButton.vue";
 import UDropdownButton from "../../ui.dropdown-button/UDropdownButton.vue";
@@ -139,69 +142,110 @@ export const IconProps: StoryFn<UInputPasswordArgs> = (args) => ({
 });
 
 export const Slots: StoryFn<UInputPasswordArgs> = (args) => ({
-  components: { UInputPassword, URow, UButton, UDropdownButton },
+  components: { UInputPassword, URow, UCol, UButton, UDropdownButton, UText, ULink, UIcon },
   setup() {
     const wifiTypes = [
       { label: "WPA2", value: "wpa2" },
       { label: "WPA3", value: "wpa3" },
     ];
 
-    return { args, wifiTypes };
+    const descriptionSlotValue = ref("");
+    const errorSlotValue = ref("");
+
+    return { args, wifiTypes, descriptionSlotValue, errorSlotValue };
   },
   template: `
-    <URow align="stretch">
-      <UInputPassword
-        v-bind="args"
-        v-model="args.modelValue"
-        label="Enter your password"
-        :config="{ passwordInput: { wrapper: 'pl-0' } }"
-      >
-        <template #label="{ label }">
-          {{ label }}
-          <span class="text-red-500">*</span>
-        </template>
-
-        <template #left>
-          <UDropdownButton
-            v-model="args.wifiType"
-            :options="wifiTypes"
-            label="Wifi type"
-            size="sm"
-            variant="soft"
-            class="rounded-r-none h-[49px]"
-          />
-        </template>
-      </UInputPassword>
-
-      <UInputPassword
-        v-bind="args"
-        v-model="args.modelValue"
-        label="Enter your password"
-        :config="{ passwordInput: { wrapper: 'pr-0' } }"
-      >
-        <template #label="{ label }">
-          {{ label }}
-          <span class="text-red-500">*</span>
-        </template>
-
-        <template #right="{ visible, toggle }">
-          <UButton
-            :label="visible ? 'Hide' : 'Show'"
-            color="neutral"
-            variant="ghost"
-            size="sm"
-            class="rounded-l-none h-[49px] min-w-[69px]"
-            @click="toggle"
-          />
-        </template>
-      </UInputPassword>
-    </URow>
+    <UCol gap="3xl">
+      <URow block>
+        <UInputPassword
+          v-bind="args"
+          v-model="args.modelValue"
+          label="Enter your password"
+          :config="{ passwordInput: { wrapper: 'pl-0' } }"
+        >
+          <template #label="{ label }">
+            {{ label }}
+            <span class="text-red-500">*</span>
+          </template>
+
+          <template #left>
+            <UDropdownButton
+              v-model="args.wifiType"
+              :options="wifiTypes"
+              label="Wifi type"
+              size="sm"
+              variant="soft"
+              class="rounded-r-none h-[49px]"
+            />
+          </template>
+        </UInputPassword>
+
+        <UInputPassword
+          v-bind="args"
+          v-model="args.modelValue"
+          label="Enter your password"
+          :config="{ passwordInput: { wrapper: 'pr-0' } }"
+        >
+          <template #label="{ label }">
+            {{ label }}
+            <span class="text-red-500">*</span>
+          </template>
+
+          <template #right="{ visible, toggle }">
+            <UButton
+              :label="visible ? 'Hide' : 'Show'"
+              color="neutral"
+              variant="ghost"
+              size="sm"
+              class="rounded-l-none h-[49px] min-w-[69px]"
+              @click="toggle"
+            />
+          </template>
+        </UInputPassword>
+      </URow>
+
+      <URow block>
+        <UInputPassword
+          v-model="descriptionSlotValue"
+          label="Password"
+        >
+          <template #description>
+            <URow align="center" gap="2xs" class="text-neutral">
+              <UIcon name="shield" size="xs" color="primary" />
+              <UText size="sm">
+                Minimum 8 characters.
+                <ULink label="Password rules" underlined size="sm" />.
+              </UText>
+            </URow>
+          </template>
+        </UInputPassword>
+
+        <UInputPassword
+          v-model="errorSlotValue"
+          label="Password"
+          :error="true"
+        >
+          <template #error>
+            <URow align="center" gap="2xs">
+              <UIcon name="error" size="xs" color="error" />
+              <UText size="sm" color="error">
+                <ul>
+                  <li>Password does not meet strength requirements</li>
+                  <li>Use at least 8 characters with mixed case and numbers</li>
+                  <li>Avoid common words and repeated characters</li>
+                </ul>
+              </UText>
+            </URow>
+          </template>
+        </UInputPassword>
+      </URow>
+    </UCol>
   `,
 });
 Slots.parameters = {
   docs: {
     story: {
-      height: "200px",
+      height: "300px",
     },
   },
 };

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

@@ -14,6 +14,7 @@ import UCol from "../../ui.container-col/UCol.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";
@@ -152,7 +153,7 @@ export const IconProps: StoryFn<UInputSearchArgs> = (args) => ({
 });
 
 export const Slots: StoryFn<UInputSearchArgs> = (args) => ({
-  components: { UInputSearch, UCol, URow, UIcon, UDropdownButton, UText },
+  components: { UInputSearch, UCol, URow, UIcon, UDropdownButton, UText, ULink },
   setup() {
     const aiVersions = [
       { label: "GPT-4o", value: "gpt-4o" },
@@ -160,10 +161,13 @@ export const Slots: StoryFn<UInputSearchArgs> = (args) => ({
       { label: "GPT-4", value: "gpt-4" },
     ];
 
-    return { args, aiVersions };
+    const descriptionSlotValue = ref("");
+    const errorSlotValue = ref("");
+
+    return { args, aiVersions, descriptionSlotValue, errorSlotValue };
   },
   template: `
-    <UCol>
+    <UCol gap="3xl">
       <UInputSearch placeholder="Search by rental district...">
         <template #right>
           <URow align="center" gap="xs">
@@ -188,13 +192,45 @@ export const Slots: StoryFn<UInputSearchArgs> = (args) => ({
           />
         </template>
       </UInputSearch>
+
+      <UInputSearch v-model="descriptionSlotValue" label="Search products">
+        <template #description>
+          <URow align="center" gap="2xs" class="text-neutral">
+            <UIcon name="travel_explore" size="xs" color="primary" />
+            <UText size="sm">
+              Tip: use
+              <ULink label="filters" underlined size="sm" />
+              for exact matches.
+            </UText>
+          </URow>
+        </template>
+      </UInputSearch>
+
+      <UInputSearch
+        v-model="errorSlotValue"
+        label="Search"
+        :error="true"
+      >
+        <template #error>
+          <URow align="center" gap="2xs">
+            <UIcon name="error" size="xs" color="error" />
+            <UText size="sm" color="error">
+              <ul>
+                <li>Search query is too short</li>
+                <li>Remove unsupported symbols from your search</li>
+                <li>Try different keywords and search again</li>
+              </ul>
+            </UText>
+          </URow>
+        </template>
+      </UInputSearch>
     </UCol>
   `,
 });
 Slots.parameters = {
   docs: {
     story: {
-      height: "270px",
+      height: "500px",
     },
   },
 };

package/ui.form-label/ULabel.vue

@@ -170,9 +170,6 @@ const { getDataTest, wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs, e
           {{ description }}
         </slot>
       </div>
-
-      <!-- @slot Use it to add something below the label content. -->
-      <slot name="bottom" />
     </div>
   </div>
 
@@ -226,8 +223,5 @@ const { getDataTest, wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs, e
         {{ description }}
       </slot>
     </div>
-
-    <!-- @slot Use it to add something below the label content. -->
-    <slot name="bottom" />
   </div>
 </template>