vueless 0.0.780 → 0.0.782

package/package.json

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

package/ui.form-checkbox-group/storybook/stories.ts

@@ -132,8 +132,7 @@ Options.parameters = {
   docs: {
     description: {
       story:
-        // eslint-disable-next-line vue/max-len
-        "Every option you pass via the `options` prop can be of different type (`Boolean` | `String` | `Number` | `Array` | `Object`).",
+        "Every option you pass via the `options` prop can be of different type (see object meta keys table below).",
     },
   },
 };

package/ui.form-input-file/UInputFile.vue

@@ -36,10 +36,10 @@ const emit = defineEmits([
   "update:modelValue",
 
   /**
-   * Triggers when the input has not passed validation.
+   * Triggers error changes.
    * @property {string} value
    */
-  "update:error",
+  "error",
 ]);
 
 const { tm } = useLocale();
@@ -47,6 +47,8 @@ const { tm } = useLocale();
 const dropZoneRef = ref<HTMLDivElement | null>(null);
 const fileInputRef = ref<HTMLInputElement | null>(null);
 
+const localError = ref("");
+
 const elementId = props.id || useId();
 
 const i18nGlobal = tm(COMPONENT_NAME);
@@ -61,10 +63,7 @@ const currentFiles = computed<File | File[] | null>({
   },
 });
 
-const currentError = computed({
-  get: () => props.error,
-  set: (newValue) => emit("update:error", newValue),
-});
+const currentError = computed(() => localError.value || props.error);
 
 const extensionNames = computed(() => {
   return props.allowedFileTypes.map((type) => type.replace(".", ""));
@@ -105,6 +104,7 @@ onBeforeUnmount(() => {
 });
 
 watch(() => props.multiple, normalizeFilesForMultipleMode);
+watch(currentError, () => emit("error", currentError.value));
 
 function normalizeFilesForMultipleMode() {
   if (!props.multiple) return;
@@ -131,13 +131,19 @@ function validate(file: File) {
 
   const isValidSize = Number(targetFileSize) <= props.maxFileSize;
 
-  if (!isValidSize && props.maxFileSize) {
-    currentError.value = currentLocale.value.sizeError;
+  if (!isValidType) {
+    localError.value = currentLocale.value.formatError;
+
+    return;
   }
 
-  if (!isValidType) {
-    currentError.value = currentLocale.value.formatError;
+  if (!isValidSize && props.maxFileSize) {
+    localError.value = currentLocale.value.sizeError;
+
+    return;
   }
+
+  localError.value = "";
 }
 
 function onChangeFile(event: Event) {
@@ -242,10 +248,18 @@ function onClickRemoveItem(id: string | number) {
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
 const mutatedProps = computed(() => ({
-  error: Boolean(props.error),
+  error: Boolean(currentError.value),
   label: Boolean(props.label),
 }));
 
+defineExpose({
+  /**
+   * An error.
+   * @property {boolean}
+   */
+  error: currentError,
+});
+
 const {
   getDataTest,
   config,
@@ -260,6 +274,8 @@ const {
   inputAttrs,
   fileListAttrs,
   buttonsAttrs,
+  chooseFileButtonErrorAttrs,
+  clearButtonErrorAttrs,
 } = useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
@@ -268,7 +284,7 @@ const {
     :for="elementId"
     :size="size"
     :label="label"
-    :error="error"
+    :error="currentError"
     :align="labelAlign"
     :disabled="disabled"
     :description="description"
@@ -316,11 +332,10 @@ const {
               :for="elementId"
               tag="label"
               variant="thirdary"
-              :color="error ? 'red' : 'brand'"
               :right-icon="config.defaults.chooseFileIcon"
               :label="currentLocale.uploadFile"
               :disabled="disabled"
-              v-bind="chooseFileButtonAttrs"
+              v-bind="currentError ? chooseFileButtonErrorAttrs : chooseFileButtonAttrs"
               :data-test="getDataTest('upload')"
             />
 
@@ -343,9 +358,8 @@ const {
             filled
             variant="thirdary"
             :disabled="disabled"
-            :color="error ? 'red' : 'brand'"
             :left-icon="config.defaults.clearIcon"
-            v-bind="clearButtonAttrs"
+            v-bind="currentError ? clearButtonErrorAttrs : clearButtonAttrs"
             :data-test="getDataTest('clear')"
             @click="onClickResetFiles"
           />

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

@@ -65,6 +65,12 @@ export default /*tw*/ {
       },
     },
   },
+  chooseFileButtonError: {
+    base: "{>chooseFileButton}",
+    defaults: {
+      color: "red",
+    },
+  },
   clearButton: {
     base: "{UButton}",
     defaults: {
@@ -75,6 +81,12 @@ export default /*tw*/ {
       },
     },
   },
+  clearButtonError: {
+    base: "{>clearButton}",
+    defaults: {
+      color: "red",
+    },
+  },
   input: "sr-only",
   i18n: {
     sizeError: "File size is too big.",

package/ui.form-label/config.ts

@@ -33,7 +33,7 @@ export default /*tw*/ {
       },
       align: {
         top: "font-medium",
-        topInside: "font-normal absolute left-3 text-gray-500 group-focus-within:text-brand-600",
+        topInside: "font-normal absolute text-gray-500 group-focus-within:text-brand-600",
         topWithDesc: "font-medium",
         left: "font-normal",
         right: "font-normal",
@@ -47,9 +47,9 @@ export default /*tw*/ {
     },
     compoundVariants: [
       { interactive: true, disabled: false, class: "hover:cursor-pointer" },
-      { align: "topInside", size: "sm", class: "top-2 text-2xs" },
-      { align: "topInside", size: "md", class: "top-2.5 text-xs" },
-      { align: "topInside", size: "lg", class: "top-2.5 text-sm" },
+      { align: "topInside", size: "sm", class: "-top-3 text-2xs" },
+      { align: "topInside", size: "md", class: "-top-4 text-xs" },
+      { align: "topInside", size: "lg", class: "-top-5 text-sm" },
       { align: "topWithDesc", size: "sm", class: "-mt-px" },
       { align: "topWithDesc", size: "md", class: "" },
       { align: "topWithDesc", size: "lg", class: "mt-px" },
@@ -69,7 +69,7 @@ export default /*tw*/ {
       },
       align: {
         top: "",
-        topInside: "pl-3 mt-1.5",
+        topInside: "mt-1.5",
         topWithDesc: "pt-0.5",
         left: "pt-0.5",
         right: "pt-0.5",

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

@@ -24,8 +24,8 @@ export default {
   title: "Form Inputs & Controls / Label",
   component: ULabel,
   args: {
-    label: "Label",
-    description: "Description",
+    label: "Email Address",
+    description: "We'll never share your email with anyone else.",
   },
   argTypes: {
     ...getArgTypes(ULabel.__name),
@@ -37,7 +37,7 @@ export default {
   },
 } as Meta;
 
-const defaultTemplate = "This is plain text";
+const defaultTemplate = "johndoe@example.com";
 
 const DefaultTemplate: StoryFn<ULabelArgs> = (args: ULabelArgs) => ({
   components: { ULabel, UText, UIcon, UBadge },
@@ -78,13 +78,12 @@ const EnumVariantTemplate: StoryFn<ULabelArgs> = (args: ULabelArgs, { argTypes }
     };
   },
   template: `
-    <UCol>
+    <UCol class="gap-10">
       <ULabel
         v-for="(option, index) in options"
         :key="index"
         v-bind="args"
         :[args.enum]="option"
-        class="border border-gray-200 rounded-dynamic-sm p-4"
       >
         <UText :[args.enum]="option">
           {{ prefixedOptions[index] }}
@@ -95,23 +94,39 @@ const EnumVariantTemplate: StoryFn<ULabelArgs> = (args: ULabelArgs, { argTypes }
 });
 
 export const Default = DefaultTemplate.bind({});
-Default.args = {};
+Default.args = { description: "" };
 
-export const Sizes = EnumVariantTemplate.bind({});
-Sizes.args = { enum: "size" };
-
-export const LabelPlacement = EnumVariantTemplate.bind({});
-LabelPlacement.args = { enum: "align" };
+export const Description = DefaultTemplate.bind({});
+Description.args = {};
 
 export const Error = DefaultTemplate.bind({});
-Error.args = { error: "Error description" };
+Error.args = { error: "Please enter a valid email address." };
 
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };
 
+export const Interactive = DefaultTemplate.bind({});
+Interactive.args = { interactive: true };
+Interactive.parameters = {
+  docs: {
+    description: {
+      story: "Make the label interactive (cursor pointer on hover).",
+    },
+  },
+};
+
+export const Centred = DefaultTemplate.bind({});
+Centred.args = { centred: true };
+
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size" };
+
+export const LabelPlacement = EnumVariantTemplate.bind({});
+LabelPlacement.args = { enum: "align" };
+
 export const SlotLabel = DefaultTemplate.bind({});
 SlotLabel.args = {
-  label: "Custom badge label",
+  label: "Email Address",
   slotTemplate: `
     <template #label="{ label }">
       <UBadge :label="label" color="green" />
@@ -119,11 +134,11 @@ SlotLabel.args = {
   `,
 };
 
-export const SlotFooter = DefaultTemplate.bind({});
-SlotFooter.args = {
+export const SlotBottom = DefaultTemplate.bind({});
+SlotBottom.args = {
   slotTemplate: `
     <template #bottom>
-      <UIcon name="star" color="green" />
+      <UBadge label="Your opinion is important for us!" color="green" class="max-w-fit" />
     </template>
   `,
 };

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

@@ -7,13 +7,14 @@ import {
 
 import URadio from "../../ui.form-radio/URadio.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
+import URow from "../../ui.container-row/URow.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
 
 interface URadioArgs extends Props {
   slotTemplate?: string;
-  enum: "variant" | "size";
+  enum: "size" | "labelAlign" | "color";
 }
 
 export default {
@@ -22,7 +23,7 @@ export default {
   component: URadio,
   args: {
     name: "radio1",
-    label: "Radio",
+    label: "Payment Method",
     value: "1",
     color: "brand",
   },
@@ -50,26 +51,75 @@ const DefaultTemplate: StoryFn<URadioArgs> = (args: URadioArgs) => ({
   `,
 });
 
+const EnumVariantTemplate: StoryFn<URadioArgs> = (args: URadioArgs, { argTypes }) => ({
+  components: { URadio, URow },
+  setup() {
+    return {
+      args,
+      options: argTypes?.[args.enum]?.options,
+    };
+  },
+  template: `
+    <URow :class="{ '!flex-col': args.enum === 'labelAlign' }">
+      <URadio
+        v-for="(option, index) in options"
+        :key="index"
+        v-bind="args"
+        v-model="args.modelValue"
+        :[args.enum]="option"
+        :label="option"
+      />
+    </URow>
+  `,
+});
+
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const Description = DefaultTemplate.bind({});
+Description.args = {
+  name: "radio3",
+  label: "Subscription Plan",
+  description: "Choose your preferred plan. You can change it anytime.",
+};
+
+export const Error = DefaultTemplate.bind({});
+Error.args = {
+  description: "Please select a payment method.",
+  error: "This field is required. Please make a selection.",
+};
+
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true, name: "radio2" };
 
-export const Description = DefaultTemplate.bind({});
-Description.args = { name: "radio3", description: "description" };
-
 export const Checked = DefaultTemplate.bind({});
 Checked.args = { checked: true, name: "radio4" };
 
-export const SlotFooter = DefaultTemplate.bind({});
-SlotFooter.args = {
+export const LabelPlacement = EnumVariantTemplate.bind({});
+LabelPlacement.args = { enum: "labelAlign" };
+
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size" };
+
+export const Color = EnumVariantTemplate.bind({});
+Color.args = { enum: "color" };
+
+export const SlotLabel = DefaultTemplate.bind({});
+SlotLabel.args = {
+  slotTemplate: `
+    <template #label="{ label }">
+      <UBadge :label="label" color="green" />
+    </template>
+  `,
+};
+
+export const SlotBottom = DefaultTemplate.bind({});
+SlotBottom.args = {
   name: "radio5",
-  label: "radio",
   value: "radio",
   slotTemplate: `
-    <template #footer>
-      <UBadge label="favourite" color="green" size="sm" />
+    <template #bottom>
+      <UBadge label="Add to favorite" color="green" size="sm" />
     </template>
   `,
 };

package/ui.form-radio-group/storybook/stories.ts

@@ -9,6 +9,7 @@ import URadioGroup from "../../ui.form-radio-group/URadioGroup.vue";
 import URadio from "../../ui.form-radio/URadio.vue";
 import UAlert from "../../ui.text-alert/UAlert.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";
@@ -23,14 +24,11 @@ export default {
   title: "Form Inputs & Controls / Radio Group",
   component: URadioGroup,
   args: {
-    label: "Radio Group",
-    modelValue: "One",
+    label: "Select your preferred delivery option:",
     options: [
-      { label: "Boolean", value: false },
-      { label: "String", value: "One" },
-      { label: "Number", value: 3 },
-      { label: "Object", value: { key: "value" } },
-      { label: "Array", value: ["Array", 1] },
+      { value: "standard", label: "Standard Shipping (3-5 business days)" },
+      { value: "express", label: "Express Shipping (1-2 business days)" },
+      { value: "pickup", label: "In-Store Pickup (Available same day)" },
     ],
   },
   argTypes: {
@@ -44,7 +42,7 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<URadioGroupArgs> = (args: URadioGroupArgs) => ({
-  components: { URadioGroup, URadio, UAlert, UCol },
+  components: { URadioGroup, URadio, UAlert, UCol, UBadge },
   setup() {
     const slots = getSlotNames(URadioGroup.__name);
 
@@ -62,8 +60,8 @@ const DefaultTemplate: StoryFn<URadioGroupArgs> = (args: URadioGroupArgs) => ({
         </URadio>
       </URadioGroup>
 
-      <UAlert color="gray" size="xs">
-        <code>Selected value: <b>{{ args.modelValue }}</b></code>
+      <UAlert size="sm" variant="thirdary" color="green" bordered>
+        <p>Selected value: {{ args.modelValue }}</p>
       </UAlert>
     </UCol>
   `,
@@ -98,21 +96,58 @@ Default.args = {
   name: "Default",
 };
 
+export const Description = DefaultTemplate.bind({});
+Description.args = {
+  name: "Description",
+  label: "Delivery Options",
+  description:
+    "Select your preferred delivery method. Additional charges may apply for expedited shipping.",
+};
+
+export const Error = DefaultTemplate.bind({});
+Error.args = {
+  name: "Error",
+  error: "Please, select at least one option to proceed.",
+};
+
+export const Disabled = DefaultTemplate.bind({});
+Disabled.args = {
+  name: "Disabled",
+  disabled: true,
+};
+
 export const Options = DefaultTemplate.bind({});
 Options.args = {
   name: "Options",
-  modelValue: "Custom string value",
   options: [
-    { label: "Boolean", value: false },
-    { label: "String", value: "Custom string value" },
-    { label: "Number", value: 4 },
-    { label: "Object", value: { key: "Custom object value" } },
-    { label: "Array", value: ["Custom array value", 2] },
+    { label: "String", value: "Subscribed" },
+    { label: "Number", value: 42 },
+    { label: "Boolean", value: true },
+    { label: "Object", value: { id: 101, status: "active" } },
+    { label: "Array", value: ["Admin", "Editor"] },
   ],
 };
+Options.parameters = {
+  docs: {
+    description: {
+      story:
+        "Every option you pass via the `options` prop can be of different type (see object meta keys table below).",
+    },
+  },
+};
+
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size", name: "Sizes" };
 
 export const Colors = EnumVariantTemplate.bind({});
 Colors.args = { enum: "color", name: "Colors" };
 
-export const Sizes = EnumVariantTemplate.bind({});
-Sizes.args = { enum: "size", name: "Sizes" };
+export const SlotLabel = DefaultTemplate.bind({});
+SlotLabel.args = {
+  name: "SlotLabel",
+  slotTemplate: `
+    <template #label="{ label }">
+      <UBadge :label="label" color="green" variant="thirdary" />
+    </template>
+  `,
+};

package/ui.form-switch/config.ts

@@ -1,5 +1,9 @@
 export default /*tw*/ {
-  switchLabel: "{ULabel}",
+  switchLabel: {
+    base: "{ULabel}",
+    wrapper: "items-center",
+    content: "h-fit",
+  },
   wrapper: {
     base: `
       flex items-center p-0.5 relative rounded-full cursor-pointer transition

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

@@ -8,13 +8,14 @@ import {
 import USwitch from "../../ui.form-switch/USwitch.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import URow from "../../ui.container-row/URow.vue";
+import UBadge from "../../ui.text-badge/UBadge.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
 
 interface USwitchArgs extends Props {
   slotTemplate?: string;
-  enum: "size" | "color";
+  enum: "size" | "color" | "labelAlign";
 }
 
 export default {
@@ -35,7 +36,7 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<USwitchArgs> = (args: USwitchArgs) => ({
-  components: { USwitch, UIcon },
+  components: { USwitch, UIcon, UBadge },
   setup() {
     const slots = getSlotNames(USwitch.__name);
 
@@ -57,7 +58,7 @@ const EnumVariantTemplate: StoryFn<USwitchArgs> = (args: USwitchArgs, { argTypes
     };
   },
   template: `
-    <URow>
+    <URow :class="{ '!flex-col max-w-fit': args.enum === 'labelAlign' }">
       <USwitch
         v-for="(option, index) in options"
         :key="index"
@@ -74,10 +75,19 @@ export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
 export const Label = DefaultTemplate.bind({});
-Label.args = { label: "Some label" };
+Label.args = { label: "Enable Notifications" };
 
 export const Description = DefaultTemplate.bind({});
-Description.args = { label: "Label", description: "Some description" };
+Description.args = {
+  label: "Enable Dark Mode",
+  description: "Switch to a darker color scheme to reduce eye strain.",
+};
+
+export const LabelPlacement = EnumVariantTemplate.bind({});
+LabelPlacement.args = { enum: "labelAlign" };
+
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size", color: "yellow" };
 
 export const Colors = EnumVariantTemplate.bind({});
 Colors.args = { enum: "color", modelValue: true };
@@ -85,11 +95,18 @@ Colors.args = { enum: "color", modelValue: true };
 export const ToggleLabel = DefaultTemplate.bind({});
 ToggleLabel.args = { toggleLabel: true };
 
-export const Sizes = EnumVariantTemplate.bind({});
-Sizes.args = { enum: "size", color: "yellow" };
-
-export const Icon = DefaultTemplate.bind({});
-Icon.args = { toggleIcon: true, color: "yellow" };
+export const ToggleIcon = DefaultTemplate.bind({});
+ToggleIcon.args = { toggleIcon: true, color: "yellow" };
 
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };
+
+export const SlotLabel = DefaultTemplate.bind({});
+SlotLabel.args = {
+  label: "Enable Notifications",
+  slotTemplate: `
+    <template #label="{ label }">
+      <UBadge :label="label" color="green" />
+    </template>
+  `,
+};